csdn - mermaid

news/2024/7/23 8:45:05 标签: mermaid

目录

  • 方向
  • 节点样式
    • 形状
    • 箭头
  • 子图
  • 流程图
  • 类图
  • uml图
  • 甘特图

https://blog.csdn.net/sandalphon4869/article/details/89341443
https://blog.csdn.net/swinfans/article/details/89393853
https://zhuanlan.zhihu.com/p/614018391
https://blog.csdn.net/qq_42491125/article/details/114005171
https://www.cnblogs.com/leween/p/12945751.html#_label4

方向

TB = TD - top bottom -从上到下
BT - bottom top - 从下到上
LR - left right - 自左向右
RL - right left - 自右向左

mermaid"> mermaid-svg-eWTkLn1WCNRbkGZb" width="116.91024017333984" xmlns="http://www.w3.org/2000/svg" height="348.202392578125" viewbox="0 0 116.91024017333984 348.202392578125" class="mermaid-svg">
TB
TD
top bottom
从上到下

mermaid"> mermaid-svg-aFraZaIJI7Ddih39" width="120.63636779785156" xmlns="http://www.w3.org/2000/svg" height="252.65179443359375" viewbox="0 0 120.63636779785156 252.65179443359375" class="mermaid-svg">
BT
bottom TOP
从下到上

mermaid"> mermaid-svg-muuePcsFW8vQlwZm" width="321.3190612792969" xmlns="http://www.w3.org/2000/svg" height="61.55059814453125" viewbox="0 0 321.3190612792969 61.55059814453125" class="mermaid-svg">
LR
left right
自左向右

mermaid"> mermaid-svg-pKp5sccV78R2IXL4" width="321.31903076171875" xmlns="http://www.w3.org/2000/svg" height="61.55059814453125" viewbox="0 0 321.31903076171875 61.55059814453125" class="mermaid-svg">
RL
right left
自右向左

节点样式

https://blog.csdn.net/sandalphon4869/article/details/89341443

形状

矩形 [内容]
圆角矩形 (内容)
圆形 ((内容))
菱形 {内容}
旗帜 >内容]
mermaid"> mermaid-svg-zyuZXW7DPyXmiJ2w" width="980.93603515625" xmlns="http://www.w3.org/2000/svg" height="416.762939453125" viewbox="0 0 980.93603515625 416.762939453125" class="mermaid-svg">
[矩形]
长方形
((圆))
{菱形}
>旗帜]
(圆角)
[[subroute process]]
[(圆柱形)]
([椭圆])
{{六边形}}
[/This is the text in the box/]
[\This is the text in the box\]
[/Christmas\]
[\Go shopping/]

箭头

mermaid"> mermaid-svg-bbMhGDBQC11AB4i9" width="614.6265869140625" xmlns="http://www.w3.org/2000/svg" height="62.08290481567383" viewbox="0 0 614.6265869140625 62.08290481567383" class="mermaid-svg">
-->
---
-.->
-.-
==>
===
end

子图

mermaid"> mermaid-svg-Si2PSPra27FaA1lF" width="387.1011962890625" xmlns="http://www.w3.org/2000/svg" height="207.1011962890625" viewbox="0.000003814697265625 0 387.1011962890625 207.1011962890625" class="mermaid-svg"> mermaid-svg-Si2PSPra27FaA1lFText">
three
mermaid-svg-Si2PSPra27FaA1lFText">
two
mermaid-svg-Si2PSPra27FaA1lFText">
one
c2
c1
b2
b1
a2
a1

流程图

http://flowchart.js.org/

mermaid sequence-diagram flow-chart"> Created with Raphaël 2.3.0 开始 我的操作 确认? 结束 yes no

类图

mermaid"> mermaid-svg-cHD53ul16l9X7tC3" width="536.3333740234375" xmlns="http://www.w3.org/2000/svg" height="397.9554138183594" viewbox="0 0 536.3333740234375 397.9554138183594" class="mermaid-svg">
Cool
Where am i?
«interface»
Class01
int chimp
int gorilla
size()
AveryLongClass
Class09
C2
C3
Class07
Object[] elementData
equals()
Class10
>>service>>
int id
size()

uml图

mermaid"> mermaid-svg-LK0Zkr3wiLx3oaXm" width="100%" xmlns="http://www.w3.org/2000/svg" height="536" style="max-width: 886px;" viewbox="-50 -10 886 536" class="mermaid-svg"> 张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

甘特图

mermaid"> mermaid-svg-0xVmzwXG91UpqE8A" width="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 340" height="340" style="max-width: 1200px;" class="mermaid-svg"> 2014-01-07 2014-01-09 2014-01-11 2014-01-13 2014-01-15 2014-01-17 2014-01-19 2014-01-21 Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A section Critical tasks Adding GANTT diagram functionality to mermaid

http://www.niftyadmin.cn/n/5200783.html

相关文章

如何将Docker的构建时间减少40%

与许多公司类似,我们为产品中使用的所有组件构建docker映像。随着时间的推移,其中一些映像变得越来越大,我们的CI构建花费的时间也越来越长。我的目标是CI构建不超过5分钟——差不多是喝杯咖啡休息的理想时间。如果构建花费的时间超过这个时间…

【C++上层应用】6. 信号 / 中断

文章目录 【 1. signal 函数 】【 2. raise函数 】 信号是由操作系统传给进程的 中断,会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上,可以通过按 CtrlC 产生中断。有些信号不能被程序捕获,但是下表所列信号可以在程序中捕…

Spring-IOC-@Value和@PropertySource用法

1、Book.java PropertySource(value"classpath:配置文件地址") 替代 <context:property-placeholder location"配置文件地址"/> Value("${book.bid}") Value("${book.bname}") Value("${book.price}") <bean id&…

C++实现KNN和K-Means

学校机器学习课程的实验课要求实现KNN和K-Means&#xff1a; &#xff08;平时没听课&#xff09;临时去查了一下KNN和K-Means是啥&#xff0c;然后自己用C写了小例子&#xff0c;想着写都写了那就把代码贴出来吧。 顺便再聊聊自己对于这俩算法的理解。 下面是文心一言的回答…

Python数据分析实战-爬取以某个关键词搜索的最新的500条新闻的标题和链接(附源码和实现效果)

实现功能 通过百度引擎&#xff0c;爬取以“开源之夏”为搜索关键词最新的500条新闻的标题和链接 实现代码 1.安装所需的库&#xff1a;你需要安装requests和beautifulsoup4库。可以使用以下命令通过pip安装&#xff1a; pip install requests beautifulsoup42.发起搜索请求…

枚举 小蓝的漆房

题目 思路 核心思想是枚举 首先利用set记录每一种颜色 然后依次从set取出一种颜色作为targetColor&#xff0c;遍历房子 如果当前房子的颜色和targetColor不相同&#xff0c;就以当前房子为起点&#xff0c;往后长度为k的区间都涂成targetColor&#xff0c;并且需要的天数递增…

解决uncompyle6反编译报错KeyError

报错内容&#xff1a;KeyError&#xff1a;3.11.0 &#xff08;这个是我自己的Python版本号&#xff09; 主要原因就是你的Python版本没在它库文件支持的版本里&#xff0c;我们需要进行手动添加即可。 首先找到文件&#xff1a;magics.py 我的是在这个路径下&#xff1a;D:\…

CMake 判断操作系统类型

上回的CMakeLists.txt里面有一句,if (WIN32)......endif(WIN32); 根据资料,这是判断操作系统是否是Windows; 下面单独看一下; 一个CMakeLists.txt文件如下; if(WIN32)# 如果是 Windowsmessage("当前操作系统为 Windows") elseif(UNIX AND NOT APPLE)# 如果…