TWO Tools

  • Gravizo it use data with url to generate svg image.

  • MermaidJS it use Js to generate html code.


Setting


Gravizo

cd {your_blog};
vim layouts/shortcodes/gravizo.html;
{{ $title := "Diagram" }}
{{ if .IsNamedParams }}
  {{ with .Get "title" }}
    {{ $title = . }}
  {{ end }}
{{ else }}
  {{ with .Get 0 }}
    {{ $title = . }}
  {{ end }}
{{ end }}
<figure>
  <img
    src='https://g.gravizo.com/svg?{{ .Inner }}'
    alt='{{ $title  }}'
    />
    <figcaption>{{ $title  }}</figcaption>
</figure>

How to use it

In your post content you can now write Gravizo diagrams:

{ {< gravizo "DOT Language (GraphViz) Example" >}}
  digraph G {
    aize ="4,4";
    main [shape=box];
    main -> parse [weight=8];
    parse -> execute;
    main -> init [style=dotted];
    main -> cleanup;
    execute -> { make_string; printf}
    init -> make_string;
    edge [color=red];
    main -> printf [style=bold,label="100 times"];
    make_string [label="make a string"];
    node [shape=box,style=filled,color=".7 .3 1.0"];
    execute -> compare;
  }
{ {< /gravizo >}}

MermaidJS

cd {your_blog};
vim layouts/shortcodes/mermaid.html;
<div class="mermaid">
  {{.Inner}}
</div>

Add the following conditionals around the script:

{{ if (.Params.mermaid) }}
<!-- MermaidJS support -->
<script async src="https://unpkg.com/browse/mermaid@8.5.2/dist/mermaid.min.js"></script>
{{ end }}

like here.

vim themes/yourthemes/layouts/_default/single.html

How to use it

In your post (or other) frontmatter:

mermaid: true

In your post content you can now write Mermaid diagrams:

{ {<mermaid>} }
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
{ {</mermaid>} }