search

mrwilson / adr-viewer

Generate easy-to-read web pages for your Architecture Decision Records
MIT License
153 stars 25 forks source link

Support Mermaid diagrams #36

Closed colindean closed 2 months ago

colindean commented 1 year ago

My team's enjoying GitHub's support for Mermaid diagrams when writing and viewing our ADRs in GitHub instead of needing a CI pipeline for PlantUML diagrams. However, when we use adr-viewer, its output leaves the Mermaid diagrams as pre-formatted text. It'd be lovely to have an option to enable embedding the code necessary to enable Mermaid, or autodetect and include it.

colindean commented 1 year ago

Mermaid.live is an editor for it.

Here's how that example looks directly in GitHub:

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
mrwilson commented 1 year ago

I'd be very onboard with this feature, mermaid is great and I use it myself for work ADRs.

A quick scan doesn't seem to reveal a python implementation of the mermaid library, so this would probably need to depend on the JS mermaid-cli under the bonnet.

josephm28 commented 5 months ago

Hi @mrwilson and @colindean! I was just thinking how nice it would be to have this and then saw this got added with https://github.com/mrwilson/adr-viewer/pull/45 in v1.4.0.

However, after upgrading to 1.4.0, Mermaid diagrams still do not get processed/displayed. I checked the DOM and don't see the Mermaid script. My diagrams are added as image

Any suggestions?

mrwilson commented 2 months ago

@josephm28 I've just published 1.5.0-RC1 with what I hope is the right fix, are you able to confirm it addresses the issue?

josephm28 commented 2 months ago

Thanks for taking a look! Yes, it works now.