List of Library for Commonmark
List of Library for Commonmark Extension
2.16. Diagram
Notes:
- Your app should support the specific library or engine to draw the diagram
- You should specify particular language of the fenced code block and write the definition of your diagram within it.
2.16.1 Mermaid
Notes:
- It’s implemented in showdown-mermaid.js
- Rendering diagrams of Flowchart or Sequence or Gantt
- Using mermaid
- Check mermaid doc for more information.
- Code inside
{ }
is optional
Syntaxes
-
Flowchart syntax:
```mermaid {"align": "left | center | right", "codeblock": true | false} graph TD; <code content> ```
-
Sequence diagram syntax:
```mermaid {"align": "left | center | right", "codeblock": true | false} sequenceDiagram <code content> ```
-
Gantt diagram syntax:
```mermaid {"align": "left | center | right", "codeblock": true | false} gantt <code content> ```
Showcases
- Flowchart
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
- Sequence diagram
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
- Gantt diagram
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
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
2.16.2 Plantuml
Notes:
- It’s implemented in showdown-plantuml.js,
- Render diagrams of uml,
- Using plantuml,
- Check plantuml website fpr more information.
- Code inside
{ }
is optional
Syntaxes
```plantuml {"align": "left | center | right", "codeblock": true | false}
@startuml
<code content>
@enduml
```
Showcases
@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml
2.16.3 Flowchart
Notes:
- It’s implemented in showdown-flowchart.js
- Render diagrams of flowchart
- Using flowchart.js
- Check flowchart website for more information.
- Code inside
{ }
is optional
Syntaxes
```flow {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Syntaxes
```flowchart {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Showcases
st=>start: Start:>https://www.google.com[blank]
e=>end:>https://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://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
Showcases
st=>start: Start
e=>end
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
2.16.4 Graphviz’s dot
Notes:
- It’s implemented in showdown-viz.js
- Render diagrams of graphviz’s dot
- Using viz.js.
- Code inside
{ }
is optional
Syntaxes
The <engine name> of json’s “engine” field value is ‘circo’, ‘dot’, ’neato’, ‘osage’, ’twopi’ in syntax language attribute.
```dot {"engine": "<engine name>", "align": "<align>"}
<code content>
```
Showcases
- Dot example with dot engine:
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
- Dot example with circo engine:
digraph G {
main -> parse -> execute;
main -> init;
main -> cleanup;
execute -> make_string;
execute -> printf
init -> make_string;
main -> printf;
execute -> compare;
}
2.16.5 Railroad diagrams
Notes:
- It’s implemented in showdown-viz.js,
- Render diagrams of railroad
- Using railroad-diagrams.
- Code inside
{ }
is optional
Syntaxes
```railroad {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Showcases
Diagram(
Optional('+', 'skip'),
Choice(0,
NonTerminal('name-start char'),
NonTerminal('escape')),
ZeroOrMore(
Choice(0,
NonTerminal('name char'),
NonTerminal('escape'))))
2.16.6 WaveDrom
Notes:
- It’s implemented in showdown-viz.js,
- Render diagrams of wavedrom
- Using wavedrom
- Check wavedrom website for more information.
- Code inside
{ }
is optional
Syntaxes
```wavedrom {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Showcases
{signal: [
{name: 'clk', wave: 'p.....|...'},
{name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
{name: 'req', wave: '0.1..0|1.0'},
{},
{name: 'ack', wave: '1.....|01.'}
]}
Showcases
{ signal: [
{ name: "pclk", wave: 'p.......' },
{ name: "Pclk", wave: 'P.......' },
{ name: "nclk", wave: 'n.......' },
{ name: "Nclk", wave: 'N.......' },
{},
{ name: 'clk0', wave: 'phnlPHNL' },
{ name: 'clk1', wave: 'xhlhLHl.' },
{ name: 'clk2', wave: 'hpHplnLn' },
{ name: 'clk3', wave: 'nhNhplPl' },
{ name: 'clk4', wave: 'xlh.L.Hx' },
]}
2.16.7 Vega and Vega-Lite
Notes:
- It’s implemented in showdown-vega.js,
- Render diagrams of Vega and Vega-Lite
- Using vega-embed,
- Check vega website and vega-lite website for more information.
- Code inside
{ }
is optional
Syntaxes
```vega {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Syntaxes
```vega-lite {"align": "left | center | right", "codeblock": true | false}
<code content>
```
Showcases
- Vega example:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 200,
"height": 200,
"autosize": "none",
"signals": [
{
"name": "startAngle", "value": 0,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "endAngle", "value": 6.29,
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01}
},
{
"name": "padAngle", "value": 0,
"bind": {"input": "range", "min": 0, "max": 0.1}
},
{
"name": "innerRadius", "value": 0,
"bind": {"input": "range", "min": 0, "max": 90, "step": 1}
},
{
"name": "cornerRadius", "value": 0,
"bind": {"input": "range", "min": 0, "max": 10, "step": 0.5}
},
{
"name": "sort", "value": false,
"bind": {"input": "checkbox"}
}
],
"data": [
{
"name": "table",
"values": [
{"id": 1, "field": 4},
{"id": 2, "field": 6},
{"id": 3, "field": 10},
{"id": 4, "field": 3},
{"id": 5, "field": 7},
{"id": 6, "field": 8}
],
"transform": [
{
"type": "pie",
"field": "field",
"startAngle": {"signal": "startAngle"},
"endAngle": {"signal": "endAngle"},
"sort": {"signal": "sort"}
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "table", "field": "id"},
"range": {"scheme": "category20"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "table"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "id"},
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"}
},
"update": {
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"padAngle": {"signal": "padAngle"},
"innerRadius": {"signal": "innerRadius"},
"outerRadius": {"signal": "width / 2"},
"cornerRadius": {"signal": "cornerRadius"}
}
}
}
]
}
- Vega-Lite example:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {
"sequence": {
"start": 0,
"stop": 12.7,
"step": 0.1,
"as": "x"
}
},
"transform": [
{
"calculate": "sin(datum.x)",
"as": "sin(x)"
},
{
"calculate": "cos(datum.x)",
"as": "cos(x)"
},
{
"fold": ["sin(x)", "cos(x)"]
}
],
"mark": "line",
"encoding": {
"x": {
"type": "quantitative",
"field": "x"
},
"y": {
"field": "value",
"type": "quantitative"
},
"color": {
"field": "key",
"type": "nominal",
"title": null
}
}
}
2.16.8 Network Sequence
Notes:
- It’s implemented in showdown-sequence.js,
- Render diagrams of sequence
- Using js-sequence-diagrams.
- Code inside
{ }
is optional
Syntaxes
The <theme name> of json’s “theme” field value is “hand” or “simple” in syntax language attribute;
```sequence {"theme": "<theme name>", "align": "<align>"}
<code content>
```
Showcases
- Sequence example with hand theme:
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
- Sequence example with simple theme:
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.
Last modified March 6, 2023: update (7eba5da)