Mermaid: Support for C4 Models

Created on 24 Feb 2020  路  3Comments  路  Source: mermaid-js/mermaid

We adopted _C4 Models_ and use _Azure DevOps Wiki_'s for our documentation. Currently, we model in _Vizio_, etc. and paste a screen shot into our wiki docs or have tried to use _PlantUML_. Azure DevOps supports _mermaid_ natively now so I would like to see if there is already an easy way to support C4 and/or Azure shapes using Flowchart(s) + CSS or if there is an opportunity to support them some other way.

I have used _PlantUML_ and extensions for both _C4_ and _Azure_ models in our wiki docs. Here are a few extensions to help explain the intent hopefully.

https://github.com/RicardoNiepel/C4-PlantUML
https://github.com/adrianvlupu/C4-PlantUML
https://github.com/RicardoNiepel/Azure-PlantUML
https://github.com/dcasati/Azure-PlantUML

Perhaps an enhancement similar to the font-awesome support?

Triage Enhancement

Most helpful comment

Having C4 in Mermaid would be terrific.

All 3 comments

Just playing around a bit - I created this using current flowchart functionality. I get that this does not completely match the example (Message Bus and Microservices) but like I said, just playing around...

Repro in Mermaid Live Editor

Having C4 in Mermaid would be terrific.

Just playing around a bit - I created this using current flowchart functionality. I get that this does not completely match the example (Message Bus and Microservices) but like I said, just playing around...

Repro in Mermaid Live Editor

Agree, but we need more figures (database, message bus, etc.)
Plus would be a killer feature, if somehow you add clickable transition from 1 graph to another. So I will be able to describe different levels of my project (classes diagram, component diagram, context diagram) and connect 1 box with (zoom in) 1 another graph. And obviously will be able to go back (zoom out).

Was this page helpful?
0 / 5 - 0 ratings

Related issues

vi picture vi  路  5Comments

The-Alchemist picture The-Alchemist  路  4Comments

vikram-rawat picture vikram-rawat  路  5Comments

mestaritonttu picture mestaritonttu  路  3Comments

tokyo786 picture tokyo786  路  3Comments