使用 Markdown 绘制图标，包括
- js-sequence
- FlowCharts
- Mermaid
- sequence
- flow
- gantt
- class and state diagrams
- pie charts
- WaveDrom
IDEs
使用 Markdown Preview Enhanced 搭建 markdown 环境
Mermaid
使用
{% mermaid type %}
{% endmermaid %}- Flow -
graph TD - Sequence -
sequenceDiagram - Gantt -
gantt - Class -
classDiagram - State -
stateDiagram - Pie -
pie - Git -
gitGraph - User Journey -
journey
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram 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
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
sequence
关于hexo的时序图插件 hexo-filter-sequence 的巨坑
导致必须加载 flowchart 才能正常显示
安装 npm install --save hexo-filter-sequence，在根目录 _config.yml 添加配置
sequence:
# webfont: # optional, the source url of webfontloader.js
# snap: # optional, the source url of snap.svg.js
# underscore: # optional, the source url of underscore.js
# sequence: # optional, the source url of sequence-diagram.js
# css: # optional, the url for css, such as hand drawn theme
options:
theme:
css_class:源码：
` ` `sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
` ` `效果：
flowchart
npm install --save hexo-filter-flowchart，在根目录 _config.yml 添加配置
flowchart:
# raphael: # optional, the source url of raphael.js
# flowchart: # optional, the source url of flowchart.js
options: # options used for `drawSVG源码：
` ` `flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
` ` `效果：
UML
Typora不支持
安装 npm install --save hexo-filter-plantuml，在根目录 _config.yml 添加配置
plantuml:
render: "PlantUMLServer"源码：
` ` `puml
@startuml
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()
@enduml
` ` `效果：
Markdown Preview Enhanced
Markdown Preview Enhanced 是一款为 Atom 以及 Visual Studio Code 编辑器编写的超级强大的 Markdown 插件。 这款插件意在让你拥有飘逸的 Markdown 写作体验。
Markdown Preview Enhanced 内部支持 flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz，Vega & Vega-lite，Ditaa 图像渲染。 你也可以通过使用 Code Chunk 来渲染 TikZ, Python Matplotlib, Plotly 等图像。