WP Githuber MD supprots Mermaid, a Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

Steps

Follow these steps to enable Mermaid module.

file

(1) Click “WP Githuber MD” and in the “Markdown” settings page.

file

(2) click “Yes” for option “Mermaid”.

Examples

file

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

file

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 <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

Screenshots

Editor

Try it in Githuber Editor. If you turn on the Live Preview, the result will be displayed immediately.

file

Notice:

  • You have to update your post (which contains Mermaid syntax string) to take effects. Because the JavaScript library will only be loaded in the pages contain Mermaid syntax string. The information is stored in post meta.
Last modified: December 31, 2018

Author

Comments

Write a Reply or Comment

Your email address will not be published.