Add mermaid diagrams support through javascript

[nikolavp]

This is the best option that I could find for this. Another way would be to shellout to the mermaid-cli but that seems too heavyweight and needs yet another cli to be installed on the machine. Where the pure javascript library is just portable.

What this does is that it reverses the highlighting done github API and then it runs the mermaid javascript library on top of the pre tags that are created.

The only downside that I can see is that there is now a dependency on the mermaid javascript library in the template. There might be ways to get around this by loading the file dynamically but that seems far too complex for my taste.

This should hopefully fix #355

[erik-nilcoast]

I just stumbled on this. I think I'll use your branch :)

[simonwex]

@joeyespo any thoughts on merging this?

[adrianlzt]

Fast way to use this branch:

uvx --from git+https://github.com/nikolavp/grip@add-mermaid-support grip index.md

[guo-sj]

I'm a novice in javascript and I want to know that how to make this pr effect on my readme.md.
This is my readme.md:

---
title: Memento Pattern
---
classDiagram
    direction LR
    Memento <.. Originator
    Caretaker o-- Memento : memento
    class Originator{
        -state
        +restoreMemento(Memento m)
        +createMemento()
    }
    class Memento{
        -state
        +getState()
        +setState()
    }
    class Caretaker{
        -Memento memento
    }

I run pip install -e . in the repo and I just get this:

Any help will be appreciate.

[guo-sj]

I'm a novice in javascript and I want to know that how to make this pr effect on my readme.md. This is my readme.md:

---
title: Memento Pattern
---
classDiagram
    direction LR
    Memento <.. Originator
    Caretaker o-- Memento : memento
    class Originator{
        -state
        +restoreMemento(Memento m)
        +createMemento()
    }
    class Memento{
        -state
        +getState()
        +setState()
    }
    class Caretaker{
        -Memento memento
    }

I run pip install -e . in the repo and I just get this:

Any help will be appreciate.

I finally figured it out, use the following command to apply this pr:

git clone https://github.com/joeyespo/grip.git
cd grip
git fetch origin pull/389/head:mermaid-support
git checkout mermaid-support

then uninstall the old version and install the new version of grip:

pip uninstall grip
pip install -e .  # execute in grip directory

[unhappychoice]

For anyone looking for Mermaid support right now, mdts already supports all Mermaid diagrams out of the box without any complex workarounds.

Just run npx mdts and your flowcharts, sequence diagrams, etc. will render perfectly.

https://github.com/unhappychoice/mdts

Might be helpful while waiting for this PR to be reviewed and merged.