Using the extension, you can see your changes from the Mermaid Code rendered as a diagram in real-time.
If you also want to interact with the diagram itself to make the changes, you can do that using the Mermaid Chart Playground: https://www.mermaidchart.com/play
Hi, I wanted to add some clarification on this topic.
I am Knut Sveidqvist, the inventor of Mermaid and creator of the Mermaid open-source project. I'm also the co-founder of Mermaid Chart.
To address the confusion: Mermaid Chart is not a separate entity "profiting off the name" - it's a commercial offering I created to help sustain the open-source project. Working on Mermaid during evenings and weekends became unsustainable as the project grew. Mermaid Chart allows me to work on what I love full-time while providing resources back to the open-source project. This support will continue to grow as our business matures.
I appreciate your concern about protecting users from deceptive practices. In this case, there is a direct connection between the open-source project and the commercial offering, created by the same founding team.
Thanks for the clarification! Glad you can cater to both worlds.
For diagramming and even UI prototyping I keep getting back to plain old ascii drawings though. Asciiflow.com is fantastic. I just wish they had vim keybindings. It's also great to embed in .md too. Could mermaid generate ascii? It just seems easier to comprehend and doesn't need a separate renderer.
No it can not. That's an interesting idea, though, but one would need to navigate/differentiate between the rendered output text and the Mermaid diagram code.
Now, we have added lots of new functionality. Proper editing with syntax highlighting, etc. Apart from that, we have also added integration with GitHub Copilot, so you can generate diagrams from code and continue to edit them using the extension.
I have been using it lightly. But the biggest problem (for me) is that I cannot use custom icons. I have to use Azure specific icons in a lot of diagrams. Mermaid's support for custom icons is only via iconify packs as far as I can tell. Is it possible to refer to icons in a local directory, such as "./images/storage.png"?
Agree but we are changing things up to make this easier.
In the upcoming Mermaid version 11, we are adding a way to select which layout algorithm is used to layout the diagram. We are also making it easier to add additional layout algorithms.
Mermaid could do well to learn from Graphviz. It’s much older and a lot of thought has been put into rendering. It’s the most powerful graph rendering engine that I’m aware of and for anything more than a little complex it’s really the only option to produce something even readable.
As both the creator of Mermaid and the founder of Mermaid Chart, I can honestly say that both are close to my heart. My hope with Mermaid Chart was to spend more daytime hours working with Mermaid, improving it, and making some structure changes that were needed to continue to grow.
Since Mermaid Chart started in 2022 Mermaid Chart has enabled this. I believe this development is incredibly beneficial for the open-source project too. Our strategy involves Mermaid Chart consistently reinvesting resources and development efforts into the open-source project.
In addition, we hope to make it easier to use Mermaid itself. These services are provided by Mermaid Chart on top of Mermaid JS.
Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
If you also want to interact with the diagram itself to make the changes, you can do that using the Mermaid Chart Playground: https://www.mermaidchart.com/play