文本绘图：Mermaid |
您所在的位置：网站首页 › 甘特图类型连接线类型 › 文本绘图：Mermaid |
|
mermaid [ˈmɜː(r)ˌmeɪd] 美人鱼 读音是“莫美德” 不丑，还挺好看 没有开始、结束的套路代码，只有图类型名称https://mermaid-js.github.io/ 在线编辑：https://mermaid-js.github.io/mermaid-live-editor Mermaid 本质是一种标记语言，借由一个解析库 将文本 「翻译渲染」成「图画」。 虽然通过一个纯文本编辑器，例如：写字板，我们可以撰写 Mermaid 文本，但显然不能指望这样就可以「渲染」出「绘图」来。这和 Markdown 的原理是一样的，渲染需要专门的编辑器。 好消息是，Mermaid 已经被很多 Markdown 编辑器直接或间接支持。 也就是说直接用现有的 Markdown 编辑器就可以上手一试了，几乎没有额外负担。 这里是部分支持 Mermaid 的编辑器 印象笔记 Markdown 笔记 有道云笔记（未实测，希望大家补充纠正） Typora （火箭君推荐） MWeb（未实测，希望大家补充纠正） VSCode + Mermaid 插件 Atom + Mermaid 插件 MermaidJS 官方网页版 编辑器 需要注意的是，由于 Mermaid 本身还在发展，并非所有特性都能被所有 Markdown 编辑器支持。不过，常见的流图编辑模式已经比较成熟，大多被支持。至于具体渲染效果如何，我们还是要以编辑器的实际输出为准。 流程图flow chart 流程图 类型名称参数：graph 方向：TD，top、down，即从上到下，有四种：LR、RL，TB、BT 节点：A[Start]。A指代节点名称，中括号里为节点内容，大括号是菱形，中括号是长方形。 箭头：最少两个短横线，短横线的数量代表长度。 注释：用2个竖线之间的内容为注释，后加空格和节点名称分开。 每句结束是分号 graph LR A[Start] --> B{Is it?}; B -->|Yes| C[OK]; C --> D[Rethink]; D --> B; B ---->|No| E[End]; graph LR A[Start] --> B{Is it?}; B -->|Yes| C[OK]; C --> D[Rethink]; D --> B; B ---->|No| E[End]; 方向有四种： LR： left right，从左到右 RL：right left TB：top bottom，从上到下，也可以是TD：top down BT：bottom top 序列图sequence diagram 序列图；时序图 类型名称参数：sequenceDiagram 参与者：participant John 注释：冒号后内容 箭头：实线箭头->> ，虚线箭头 -->> , sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great! sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great! 甘特图gantt：类型名称参数 title：标题 dateFormat：时间日期格式 section：部分 A task :a1, 2014-01-01, 30d ：冒号前内容，冒号后：指代名称，开始时间，持续时间 关键字 head含义 title 标题 dateFormat 日期格式 section 模块 Completed 已经完成 Active 当前正在进行 Future 后续待处理 crit 关键阶段 日期缺失 默认从上一项完成后 gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2021-06-01, 30d Another task :after a1 , 20d section 无人船 第一阶段 :2021-06-07 , 82d 第二阶段 : 24d gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2021-06-01, 30d Another task :after a1 , 20d section 无人船 第一阶段 :2021-06-07 , 82d 第二阶段 : 24d大的例子 gantt dateFormat YYYY-MM-DD title 甘特图示例 section 开始阶段 完成任务 :done, des1, 2014-01-06,2014-01-08 激活任务 :active, des2, 2014-01-09, 3d 未来的任务 : des3, after des2, 5d 未来的任务2 : des4, after des3, 5d section 紧急任务 在关键线完成任务 :crit, done, 2014-01-06,24h 实现解析器和JSON :crit, done, after des1, 2d 为解析器创建测试 :crit, active, 3d 关键线的未来任务 :crit, 5d 为渲染器创建测试 :2d 添加到 mermaid :1d section 文档 描述甘特语法 :active, a1, after des1, 3d 将甘特图添加到演示页面 :after a1 , 20h 向演示页面添加另一个图表 :doc1, after a1 , 48h section 最后阶段 描述甘特语法 :after doc1, 3d 将甘特图添加到演示页面 : 20h 向演示页面添加另一个图表 : 48h gantt dateFormat YYYY-MM-DD title 甘特图示例 section 开始阶段 完成任务 :done, des1, 2014-01-06,2014-01-08 激活任务 :active, des2, 2014-01-09, 3d 未来的任务 : des3, after des2, 5d 未来的任务2 : des4, after des3, 5d section 紧急任务 在关键线完成任务 :crit, done, 2014-01-06,24h 实现解析器和JSON :crit, done, after des1, 2d 为解析器创建测试 :crit, active, 3d 关键线的未来任务 :crit, 5d 为渲染器创建测试 :2d 添加到 mermaid :1d section 文档 描述甘特语法 :active, a1, after des1, 3d 将甘特图添加到演示页面 :after a1 , 20h 向演示页面添加另一个图表 :doc1, after a1 , 48h section 最后阶段 描述甘特语法 :after doc1, 3d 将甘特图添加到演示页面 : 20h 向演示页面添加另一个图表 : 48h 饼状图pie：类型名称参数 title：标题 数据不是百分比，原始数据计算得出百分比 pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 "钠" : 10 pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 "钠" : 10 节点形状 长方形节点长方形，中括号 graph LR id[长方形节点]; graph LR id[长方形节点]; 圆角节点长方形圆角，小括号 graph LR id(圆角节点); graph LR id(圆角节点); 圆形节点圆节点(The form of a circle) 双小括号 graph LR id((圆形节点)); graph LR id((圆形节点)); 非对称节点非对称节点(asymetric shape) 只有一半中括号 graph LR id>非对称节点] graph LR id>非对称节点] 菱形节点菱形节点(rhombus) 大括号 graph LR id{菱形节点} graph LR id{菱形节点} 连接线节点间的连接线有多种形状，而且可以在连接线中加入标签。 箭头形连接 graph LR; A-->B; graph LR; A-->B; 开放连接 graph LR A --- B graph LR A --- B 标签连接 graph LR A -- This is the label text --- B; graph LR A -- This is the label text --- B; 箭头标签连接 graph LR A-- text -->B graph LR A-- text -->B 虚线连接(dotted link,点连线) graph LR A-.->B A-.-.B graph LR A-.->B A-.-.B 标签虚线 graph LR A-.text.->B graph LR A-.text.->B 粗实线 graph LR A==>B A===B graph LR A==>B A===B 标签粗线 graph LR A==text==>B A==text===B graph LR A==text==>B A==text===B 序列图 sequenceDiagram participant John participant Alice Alice-xJohn:Hello John,how are you? John-->>Alice:Great! sequenceDiagram participant John participant Alice Alice-xJohn:Hello John,how are you? John-->>Alice:Great! 顺序参与者(participant)的顺序 participant 别名as participant Alice as 张三 箭头消息的语法：实线或者虚线的使用： [Actor][Arrow][Actor]:Message text Arrow的六种样式： ->：实线 -->：虚线 ->>：实线箭头 -->>：虚线箭头 -x：实线箭头× --x：虚线箭头× sequenceDiagram Alice->John: Hello John, how are you ? John-->Alice:Great! Alice->>John: dont borther me ! John-->>Alice:Great! Alice-xJohn: wait! John--xAlice: Ok! sequenceDiagram Alice->John: Hello John, how are you ? John-->Alice:Great! Alice->>John: dont borther me ! John-->>Alice:Great! Alice-xJohn: wait! John--xAlice: Ok! 便签给序列图增加便签： 具体规则： [right of | left of | over][Actor]:Text sequenceDiagram participant A Note left of A: 标签内容 sequenceDiagram participant A Note left of A: 标签内容跨越两个Actor的便签： sequenceDiagram Alice->>John:Hello John, how are you? Note over Alice,John:一个典型互动 sequenceDiagram Alice->>John:Hello John, how are you? Note over Alice,John:一个典型互动 循环在序列图中，也可以使用循环，具体规则如下： Loop text ... statements... end示例 sequenceDiagram Alice->>John: Hello! loop 每次重复 John->>Alice:Great! end sequenceDiagram Alice->>John: Hello! loop 每次重复 John->>Alice:Great! end 选择在序列图中选择的表达。规则如下： alt Describing text ...statements... else ...statements... end或者使用opt(推荐在没有else的情况下使用) opt Describing text ...statements... end示例 sequenceDiagram participant Alice as 张三 participant Bob as 李四 Alice->>Bob: Hello, how are you? alt 生病了 Bob->>Alice:很糟糕 else 健康的 Bob->>Alice:清新如雏菊 end opt 额外回复 Bob->>Alice:感谢问候 end sequenceDiagram participant Alice as 张三 participant Bob as 李四 Alice->>Bob: Hello, how are you? alt 生病了 Bob->>Alice:很糟糕 else 健康的 Bob->>Alice:清新如雏菊 end opt 额外回复 Bob->>Alice:感谢问候 end |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |