mermaidjs

Nov 27, 2020
shortcode mermaidjs theme drawing diagram netlify

Some links to mermaidjs

The topic is interesting because it will be useful to create the various diagrams. Initially, some links can be collected here, and mermaidjs explored.

mermaid js

Netlify Learn Theme • mermaidjs shortcode

Looking for information about being able to make a diagram in Hugo using shortcodes, found this Learn Theme which has a Github repository with shortcodes, including mermaid.

There would be a link to the javascript, and a shortcode to set up, but here is an example of the shortcode being used to make a diagram. This has now been enabled, using the mermaid shortcode in the next heading section. It should still work. It does. Now we have the live rendering and the picture.


    
graph LR;
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

mermaid picture

Trying out a mermaid shortcode

mermaid js hugo shortcode

add layouts/shortcodes/mermaid.html
add mermaid js package load (a specific version at the moment) to the bottom of /layouts/_default/single.html
set mermaid: true in the front matter for this markdown
here is some mermaid definition using the shortcode (it works!)

graph TD; A-->B; A-->C; B-->D; C-->D[this is D];

mermaidjs

Some links to mermaidjs

Netlify Learn Theme • mermaidjs shortcode

Trying out a mermaid shortcode

More links to follow up

See Also

Breadcrumb