Mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown

18

If web-components will become a thing, and we use the ! as the trigger char for codeblocks then we could just make it so that:

``` !mermaid A Demo Diagram { .diagramStyle id=demoChart } 
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

<mermaid class=diagramStyle id=demoChart alt="A Demo Diagram" >
    graph TD;
        A-->B;
        A-->C;
        B-->D;
        C-->D;
</mermaid>

Essentially a no-markdown island. Of course, you could also have a filter in front of the AST to catch and modify the behaviour before it defaults back to webcomponent mode.

Using Concepts from:

  • Consistent attribute syntax
  • alt field is heavily encouraged by w3 for disability accessibility reasons. So infotext should always be included in alt field to encourage it’s usage. (e.g. blind users can understand what the diagram is suppose to be.)

Note, until the official mermaid supports webcomponents, if the above approach is adopted… you will need to type like this:

``` !div { .mermaid } 
CHART DEFINITION GOES HERE
```

To render as in this official example :

<div class="mermaid"> 
CHART DEFINITION GOES HERE 
</div>

Alternatively, you can have a official commonmark-mermaid plugin that captures the web-component and output the correct html code for the mermaid engine (at least until they switch to webcomponents).

  • Another approach is to say that “.dot” and “#dot” in infotext means a div with either a class=dot or id=dot. ( e.g. .mermaid is equiv to !div { .mermaid } )

If people like this idea and it has not been discussed before, I could probbly paste this into it’s own thread. Or maybe slip it into the “no markdown island” if relevant.