TIL: Diagram with Mermaid on GitHub in Markdown

This content originally appeared on DEV Community and was authored by jonasbn

Mermaid is a JavaScript utility to create beautiful diagrams from text. I have read about it before, but it had been parked on the check out - eventually list.

On February 14th. GitHub announced support for Mermaid in GitHub Markdown. I decided to check it out right away, so I went to the Mermaid website, I found the online editor- which is truly awesome and started thinking about what to diagram.

I am writing up some notes on chezmoi and decided to see if I could replicate the diagram from the chezmoi documentation.

All I can say it that you very very fast can get something that looks really good.

I ran into an issues with replicating the order of the elements. Luckily the Mermaid documentation is pretty good and adding participant elements provided in the order I wanted.

You can compare the two versions:

And this is the Mermaid code:

sequenceDiagram
    participant $HOME
    participant working copy
    participant local repo
    participant remote repo
    $HOME->>local repo: chezmoi init
    $HOME->>working copy: chezmoi add <file>
    working copy->>working copy: chezmoi edit <file>
    working copy-->>$HOME: chezmoi diff
    working copy->>$HOME: chezmoi apply
    $HOME-->>working copy: chezmoi cd
    working copy->>local repo: git add
    working copy->>local repo: git commit
    local repo->>remote repo: git push
    local repo-->>$HOME: exit

When fetching the version from chezmoi I found out it was also Mermaid well I just needed a reference diagram for my experiment.

But I ran into another problem. Mermaid is supported for Markdown on GitHub, which is marvelous, but it does not seem to be supported for pages, you can compare, these two versions:

I am investigating whether I can add Mermaid to the Pages rendering, but it requires that I can control the HTML, so I would prefer for GitHub to support this out of the box.

Resources and References

This was lifted from my TIL collection on GitHub

This content originally appeared on DEV Community and was authored by jonasbn

Print Share Comment Cite Upload Translate Updates

APA

jonasbn | Sciencx (2022-02-17T09:45:25+00:00) TIL: Diagram with Mermaid on GitHub in Markdown. Retrieved from https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/

MLA

" » TIL: Diagram with Mermaid on GitHub in Markdown." jonasbn | Sciencx - Thursday February 17, 2022, https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/

HARVARD

jonasbn | Sciencx Thursday February 17, 2022 » TIL: Diagram with Mermaid on GitHub in Markdown., viewed ,<https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/>

VANCOUVER

jonasbn | Sciencx - » TIL: Diagram with Mermaid on GitHub in Markdown. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/

CHICAGO

" » TIL: Diagram with Mermaid on GitHub in Markdown." jonasbn | Sciencx - Accessed . https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/

IEEE

" » TIL: Diagram with Mermaid on GitHub in Markdown." jonasbn | Sciencx [Online]. Available: https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/. [Accessed: ]

rf:citation

» TIL: Diagram with Mermaid on GitHub in Markdown | jonasbn | Sciencx | https://www.scien.cx/2022/02/17/til-diagram-with-mermaid-on-github-in-markdown/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Resources and References

Related Posts