FUN WITH MERMAID JS

Mermaidjs - Markdownish syntax for generating flowcharts …

What is Mermaidjs ?

Mermaid is a simple markdown-like script language for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs from text via javascript.

Keywords:

  • Simplify documentation and avoid heavy tools.
  • Open source Visio Alternative.
  • Commonly used for explaining your code!

Project homepage: https://mermaidjs.github.io
Live Editor: https://mermaidjs.github.io/mermaid-live-editor

In fact, with mermaidjs various kinds of graphs can be rendered into a SVG image just by using plain text following the mermaidjs syntax.
The graph declaration can be embedded inside a markdown file which is simply amazing.

This site is build with hugo and here is the shortcode used to get mermaid up and running:

graph LR layouts --> shortcodes shortcodes --> mermaid.html style layouts stroke:white style shortcodes stroke:white style mermaid.html fill:LightBlue,stroke:white
<link href='{{"mermaid/mermaid.css" | relURL}}' type="text/css" rel="stylesheet"/>
<script defer src='{{"mermaid/mermaid.js" | relURL}}'>
	mermaid.initialize({
		startOnLoad:true
	});
</script>
<div class="mermaid"
	align='{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}'>
{{ .Inner | safeHTML }}
</div>

Examples:

Graph:

{{/* < mermaid align="left" > */}}

graph LR
	content --> blog
	blog --> webdevelopment
	webdevelopment --> | resource <br/> bundle | 19-11-08_mermaid_jquery 
	19-11-08_mermaid_jquery --> index.md
	19-11-08_mermaid_jquery --> assets
	assets --> mermaid_test.png

{{/* < /mermaid > */}}

graph LR content --> blog blog --> webdevelopment webdevelopment --> | resource
bundle | 19-11-08_mermaid_jquery 19-11-08_mermaid_jquery --> index.md 19-11-08_mermaid_jquery --> assets assets --> mermaid_test.png

Gantt chart:

{{/* < mermaid align="left" > */}}

gantt
	dateFormat  YYYY
	axisFormat %Y
	
	title Timeline (1800 - 1900)

	section Classic era (1750 - 1810)
		Haydn (1732-1809): 		active, 1732,1809
		Boccherini (1743-1805):	default, 1743,1805
		Mozart  (1756-1791):	active, 1756,1791
		Beethoven (1770-1828):	active, 1770,1828

	section Romantic era (1810 - 1914)
		Mendelssohn Bartholdy (1809-1847):	default, 1809,1847
		Chopin (1810-1849):		active, 1810,1849
		Liszt (1811-1886):		active, 1811,1886
		Verdi (1813-1901):		active, 1813,1901
		French revolution (1789-1800): done, 1789,1800

	section Modern era (1914 - 2000)
		Ravel (1875-1937):			default, 1875,1937
		Bartók (1881-1945):			default, 1881,1945
		Stravinskij (1882-1971):	default, 1882,1971
		Varèse (1883-1965):			default, 1883,1965
		Prokof'ev (1891-1953):		default, 1891,1953

{{/* < /mermaid > */}}
gantt dateFormat YYYY axisFormat %Y title Timeline (1800 - 1900) section Classic era (1750 - 1810) Haydn (1732-1809): active, 1732,1809 Boccherini (1743-1805): default, 1743,1805 Mozart (1756-1791): active, 1756,1791 Beethoven (1770-1828): active, 1770,1828 section Romantic era (1810 - 1914) Mendelssohn Bartholdy (1809-1847): default, 1809,1847 Chopin (1810-1849): active, 1810,1849 Liszt (1811-1886): active, 1811,1886 Verdi (1813-1901): active, 1813,1901 French revolution (1789-1800): done, 1789,1800 section Modern era (1914 - 2000) Ravel (1875-1937): default, 1875,1937 Bartók (1881-1945): default, 1881,1945 Stravinskij (1882-1971): default, 1882,1971 Varèse (1883-1965): default, 1883,1965 Prokof'ev (1891-1953): default, 1891,1953