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

```mermaid {"align":"center", "codeblock": true} graph TD; A-->B; A-->C; B-->D; C-->D;

  • Sequence diagram

```mermaid {"align":"right"} 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!

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

Showcases

```plantuml {"align":"right"} @startuml participant User

Syntaxes

Showcases

```flow {"align":"center"} 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

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 \ of json's "engine" field value is 'circo', 'dot', 'neato', 'osage', 'twopi' in syntax language attribute.

Showcases

  • Dot example with dot engine:

```dot {"engine":"dot", "align":"center"} 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

Showcases

```railroad {"align":"center"} Diagram( Optional('+', 'skip'), Choice(0, NonTerminal('name-start char'), NonTerminal('escape')), ZeroOrMore( Choice(0, NonTerminal('name char'), NonTerminal('escape'))))

Showcases

```wavedrom {"align":"center"} {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.'} ]}

2.16.7 Vega and Vega-Lite

Notes:

Syntaxes

Syntaxes

Showcases

  • Vega example:

```vega {"align":"center"} { "$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"} } } } ] }

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 \ of json's "theme" field value is "hand" or "simple" in syntax language attribute;

Showcases

  • Sequence example with hand theme:

```sequence {"theme":"hand", "align":"center"} Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!

PreviousGetting Started about MarkdownNextList of Extension in Markdown

Last updated

Was this helpful?