| 惊呆！原来 markdown 的画图功能如此强大！ | 您所在的位置：网站首页 › ipad4可以画图吗 › 惊呆！原来 markdown 的画图功能如此强大！ |
惊呆！原来 markdown 的画图功能如此强大！
|
1. 引言 Markdown 是一种轻量级标记语言，相比于 xml、html 等超文本标记语言，Markdown 的语法更简单，结构更清晰，更加易读易用。 博主作为一个经常写些东西的笔记爱好者，已经成为了 markdown 的拥趸，甚至为了方便自己使用，自定义了很多类 markdown 语法从而形成了自己的个人博客。 然而，markdown 这个看似简单轻量的标记语言，却支持非常强大的绘图功能，使用起来十分方便，本文我们就来详细介绍下 markdown 语言如何绘制流程图、饼图、序列图、甘特图。 2. markdown 绘图块启用 markdown 绘图块与代码块非常像： 代码语言：javascript复制 ```mermaid ··· 绘图指令 ··· ```3. 流程图3.1 流程图声明绘制流程图的第一行是流程图的声明，包含关键字 graph 和流程图方向。 流程图方向包含以下标识： TB，从上到下TD，从上到下BT，从下到上RL，从右到左LR，从左到右T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN 例如： 代码语言：javascript复制 graph *LR;* A-->B B-->C C-->D D-->A 3.2 节点形状默认节点 A文本节点 B[bname]圆角节点 C(cname)圆形节点 D((dname))非对称节点 E>ename]菱形节点 F{fname}代码语言：javascript复制 graph TB
A
B[bname]
C(cname)
D((dname))
E>ename]
F{fname} 3.3 连线形状节点间的连接线有多种形状，可以在连接线中加入标签： 箭头连接 A1–->B1 开放连接 A2—B2 标签连接 A3–text—B3 箭头标签连接 A4–text–>B4 虚线开放连接 A5.-B5 虚线箭头连接 A6-.->B6 标签虚线连接 A7-.text.-B7 标签虚线箭头连接 A8-.text.->B8 粗线开放连接 A9===B9 粗线箭头连接 A10==>B10 标签粗线开放连接 A11==text===B11 标签粗线箭头连接 A12==text==>B12  3.4 实例 3.5 子图markdown 的语法中，还允许用户添加子图，子图就是以 subgraph 关键字标识的 graph，并以 end 结尾，但所有节点名都是全局的，并不隔离，因此子图之间是可以相互连接的。 实例代码语言：javascript复制 graph LR subgraph g1 a1*-->b1* end • subgraph g2 a2*-->b2* end subgraph g3 a3*-->b3* end a3*-->a2* 4. 时序图
用来描述两个或更多模块之间的交互过程首选就是时序图，markdown 也同样提供了绘制时序图的功能。 绘制时序图的关键字是 sequenceDiagram。 4.1 参与者 -- 模块声明作为多个模块之间交互过程的表现，首要的工作就是要声明共有哪些模块。 我们需要通过 participant 关键字进行声明，声明的顺序就是模块从左到右的展示顺序。 例如： 代码语言：javascript复制 sequenceDiagram participant B participant A4.2 连线markdown 时序图支持以下连线方式： 无箭头实线 ->有箭头实线 ->>无箭头虚线 –>有箭头虚线 –>>带x实线 -x带x虚线 –x代码语言：javascript复制 sequenceDiagram participant server participant CA participant client server->>CA: 这是我的公钥 CA-->>server: 下发证书 server->client: 建立连接 client->>server: 我要 RSA 算法加密的公钥 server-->>client: 下发证书与公钥 client-->>server: 上报通过公钥加密的随机数 server->>server: 生成对称加密秘钥 client-->server: 加密通信 client-->server: 加密通信 client-xserver: 关闭连接 4.3 高级特性
在实际的使用场景中，往往并不是这样简单地相互通信，而是需要分支、循环等特殊处理，markdown 也同样可以支持。 4.3.1 循环代码语言：javascript复制 loop Loop_text ... statements... end 4.3.2 分支代码语言：javascript复制 alt Describing_text ...statements... else ...statements... end *# 推荐在没有else的情况下使用 opt(option,选择)* opt Describing_text ...statements... End4.3.3 注释注释或者称之为便签，用来对模块做额外标记。 单个标签note [right of | left of][Actor]: Text 给多个模块打标签note over [Actor1, Actor2...]:Text 4.3.4 实例代码语言：javascript复制 sequenceDiagram participant Doctor participant Bob note right of Bob: Bob is a patient loop Look Bob each hour Doctor->>Bob: How are you? alt Bob is sick Bob->>Doctor: Not so good. else Bob->>Doctor: Fine, thank you. end loop Ask about patient Doctor-->Bob: Inquire about the situation end opt Extra response Bob->>Doctor:Thanks for asking end end note right of Doctor: hourly ask finished 5. 甘特图
在项目管理中，甘特图是一个非常得力的好帮手，通过甘特图，我们可以对整个项目的进展情况一目了然。 用 markdown 绘制甘特图十分简单快捷。 他有以下关键字： dateFormat -- 日期格式section -- 模块声明Completed -- 已经完成Active -- 进行中Future -- 待后续处理crit -- 关键阶段下面是一个完整的甘特图展示： 代码语言：javascript复制 gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h 附录 -- 参考资料https://en.wikipedia.org/wiki/Unified_Modeling_Language#Interaction_diagrams
|
【本文地址】