I use a similar plugin for graphviz and PNG and SVG output are used often when exporting the graphs from the tool.
Adding a ticket for this :)
Readit Newsknsv commented on Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in Visual Studio Code docs.mermaidchart.com/blo... · Posted by u/msfi
Is there a visual interface for Mermaid?
I can blast out auto-reflowing flowcharts in Flying Logic on a keyboard but it's moved to a subscription model that doesn't make sense for my irregular use.
Seeing the connections in real time really helps with my thought process.
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
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.
The problem is that a lot of people will google mermaid chart, or come across an extension like this, and find a site that looks like the official website and docs but isn't; it's a paid product with no relation that's simply profiting off of the name. That's deceptive, regardless of whether it's "fair use" or not.
Honestly, I'm surprised anyone on HN would defend that sort of behavior.
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.
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"?
That's good feedback. The icons are not bundled into Mermaid itself due to copyright concerns. The approach you suggest would make sense, though.
Is this new? I remember playing with a mermaid plugin like a year ago.
You are right! A light plugin was released then.
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.
knsv commented on Show HN: GUI for editing Mermaid class diagrams docs.mermaidchart.com/blo... · Posted by u/knsv
knsv commented on Show HN: GUI for editing Mermaid class diagrams docs.mermaidchart.com/blo... · Posted by u/knsv
knsv commented on Show HN: GUI for editing Mermaid class diagrams docs.mermaidchart.com/blo... · Posted by u/knsv
Is there a demo available without creating an account?
Yes! You can use this in the free mermaid playground: https://www.mermaidchart.com/play