Markdown_02_作图
前言
一、序列图（Sequence）
序列图由 js-sequence提供支持，可以将代码块转成序列图
示例如下：
```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
效果如下：
```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
二、流程图（Flowchart）
序列图由flowchart.js提供支持，可以将代码块转成序列图
示例如下：
```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
效果如下：
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
三、Mermaid
Mermaid 支持生成序列图、流程图、甘特图
详细用法参见官方文档 : https://mermaidjs.github.io/
1.Sequence
示例如下：
```mermaid
%% Example of sequence diagram
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
```
效果如下：
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
2.Flowchart
示例如下：
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
效果如下：
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
3.Gantt
```mermaid
%% Example with selection of syntaxes
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
```
效果如下：
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://support.typora.io/Draw-Diagrams-With-Markdown/
- https://github.com/adrai/flowchart.js
- Markdown绘制流程图的方法
- Markdown中使用mermaid画流程图
最新文章
- Android开发学习——画横线竖线
- C#回顾 - 8.利用反射动态创建对象
- SQLSERVER20008 完整备份和差异备份
- Learn clojure in Y minutes
- 软件工程 speedsnail 冲刺3
- JVM运行机制
- C# 中的 ref 和 out 的意义和使用方法
- ThinkPhp学习09
- Phoenix和SQuirrel安装详解
- python子域名收集器
- 如何使用maven搭建web项目
- JAVA设计模式之【装饰者模式】
- react native中使用echarts
- ECMA6 New Features
- pp 总结二
- final、finally、finalize区别
- 桥接和nat连接
- JAVA多线程提高七:Callable与Future的应用
- Java（静态）变量和（静态）代码块的执行顺序
- cocos2d-x v3.0新特性及使用