markdown 图表语法

whfox

typora 支持的流程图、序列图、思维导图相关语法。

Flow Charts

相关文档:

https://flowchart.js.org(opens new window)

https://github.com/adrai/flowchart.js(opens new window)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
```

flow

Sequence Diagrams

相关文档:

https://bramp.github.io/js-sequence-diagrams/(opens new window)

1
2
3
4
5
6
```sequence
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

sequece

Mermaid

相关文档:

https://github.com/mermaid-js/mermaid(opens new window)

https://mermaid.js.org/intro/(opens new window)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```

mindmap

On this page
markdown 图表语法