Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add support for mermaid.js diagrams #19

Open
mscno opened this issue Nov 13, 2021 · 3 comments
Open

add support for mermaid.js diagrams #19

mscno opened this issue Nov 13, 2021 · 3 comments

Comments

@mscno
Copy link

mscno commented Nov 13, 2021

It would be a great feature to enable native support of mermaid.js diagram blocks.
This would enable users to write diagrams as code and keep them inside the markdown files.

It is simple enough to include the mermaid.js dependency and include a raw div with mermaid syntax, but we may need some more tweaking to enable parsing of code blocks.

// Raw div block - these can be picked up by default by mermaid.js just by including the dependency.
<div class="mermaid">
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</div>

// Code block - these are not picked up by mermaid.js, since they are rendered as <pre><code> blocks.
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

By default the markdown renderer just renders a mermaid block as a standard code block.

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

I dont know if mermaid rendering can be enabled without changing the core zola rendering engine, but it seems like it was achieved by Docsy (a hugo docuementation theme) without changing the core hugo markdown engine, and using jquery instead:
https://github.com/google/docsy/blob/d4b214c8e5c7fabf9e83b58a9df2281be242d5b4/assets/js/mermaid.js

@AlexMikhalev
Copy link

👍 very useful feature.

@aaranxu
Copy link
Owner

aaranxu commented Nov 20, 2021

This is a good suggestion. I will add it soon.

@AlexMikhalev
Copy link

Good. Use case I have in mind diagram with clickable links:

graph LR;

QuickStart(Quick Start) --> CmdPalette(Command<BR>Palette);
QuickStart --> CreateNotes("Create notes");
QuickStart --> InternalLinks("Internal Links");

click CreateNotes "/Create notes";
click CmdPalette "/Command palette";
click InternalLinks "/Internal link";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants