Skip to content

Instantly share code, notes, and snippets.

@blackcater
Created July 6, 2018 16:45
Star You must be signed in to star a gist
Save blackcater/1701e845a963216541591106c1bb9d3b to your computer and use it in GitHub Desktop.
Markdown Diagrams

Diagrams

Markdown Preview Enhanced supports rendering flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz, Vega & Vega-lite, Ditaa diagrams. You can also render TikZ, Python Matplotlib, Plotly and all sorts of other graphs and diagrams by using Code Chunk.

Please note that some diagrams don't work well with file exports such as PDF, pandoc, etc.

Flow Charts

This feature is powered by flowchart.js.

  • code block with flow notation will be rendered by flowchart.js.

screenshot from 2017-11-25 21-43-02

Sequence Diagrams

This feature is powered by js-sequence-diagrams.

  • code block with sequence notation will be rendered by js-sequence-diagrams.
  • Two themes are supported: simple(default theme) and hand.

screenshot from 2017-11-25 21-47-41

Mermaid

Markdown Preview Enhanced uses mermaid to render flow charts and sequence diagram.

  • code block with mermaid notation will be rendered by mermaid.
  • check mermaid doc for more information about how to create flowchart and sequence diagram screen shot 2017-06-05 at 8 04 58 pm

Three mermaid themes are provided, and you can choose theme from package settings:

  • mermaid.css
  • mermaid.dark.css
  • mermaid.forest.css screen shot 2017-06-05 at 8 47 00 pm

You can also edit the mermaid init config by running Markdown Preview Enhanced: Open Mermaid Config command.

PlantUML

Markdown Preview Enhanced uses PlantUML to create multiple kinds of graph. (Java is required to be installed)

  • You can install Graphviz (not required) to generate all diagram types.
  • Code block with puml or plantuml notation will be rendered by PlantUML.

screen shot 2017-06-05 at 8 05 55 pm

If @start... is not found, then @startuml ... @enduml will automatically be inserted.

WaveDrom

Markdown Preview Enhanced uses WaveDrom to create digital timing diagram.

  • Code block with wavedrom notation will be rendered by WaveDrom.

screen shot 2017-06-05 at 8 07 30 pm

GraphViz

Markdown Preview Enhanced uses Viz.js to render dot language diagram.

  • Code block with viz or dot notation will be rendered by Viz.js.
  • You can choose different engines by specifying {engine="..."}. Engine circo, dot, neato, osage, or twopi are supported. Default engine is dot.

screen shot 2018-03-18 at 3 18 17 pm

Vega and Vega-lite

Markdown Preview Enhanced supports vega and vega-lite static diagrams.

  • Code block with vega notation will be rendered by vega.
  • Code block with vega-lite notation will be rendered by vega-lite.
  • Both JSON and YAML inputs are supported.

screen shot 2017-07-28 at 7 59 58 am

You can also @import a JSON or YAML file as vega diagram, for example:

@import "your_vega_source.json" {as="vega"}
@import "your_vega_lite_source.json" {as="vega-lite"}

Ditaa

Markdown Preview Enhanced supports ditaa that can convert diagrams drawn using ascii art ('drawings' that contain characters that resemble lines like | / - ), into proper bitmap graphics.

(Java is required to be installed)

ditaa is intergrated with code chunk, for example:

  ```ditaa {cmd=true args=["-E"]}
  +--------+   +-------+    +-------+
  |        | --+ ditaa +--> |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |     {d}|   |       |    |       |
  +---+----+   +-------+    +-------+
      :                         ^
      |       Lots of work      |
      +-------------------------+
  ```

shift-enter to run code chunk. set {hide=true} to hide code block. set {run_on_save=true} to render ditaa when you save the markdown file.

screen shot 2017-07-28 at 8 11 15 am


If you don't want to render graphs but only display code block, then you can add {code_block=true} like blow:

```mermaid {code_block=true}
// your mermaid code here
```

You can set attributes for the container of the diagram. For example:

```puml {align="center"}
a->b
```

will put the puml diagram at the center of preview.


When you export your markdown file to GFM Markdown, the diagrams will be saved as png images to your imageFolderPath defined in package settings. You can control the exported image filename by declaring {filename="your_file_name.png"}.

For example:

```mermaid {filename="my_mermaid.png"}
...
```

➔ TOC

@khofstadter
Copy link

Great, thank you!

@FrostyX
Copy link

FrostyX commented Nov 4, 2021

Thank you for this cheatsheet.
Markvis looks also promising and the code looks a bit simpler than Vega

@cozajeden
Copy link

Thank, you!

@olsky
Copy link

olsky commented Aug 2, 2022

so cool! :-) thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment