Show HN: GUI for editing Mermaid class diagrams

Any idea when Mermaid diagrams will render outside of web browsers?

https://github.com/mermaid-js/mermaid/issues/2485

<rant> Aside, I'm the author of KeenWrite (https://keenwrite.com/), a Markdown text editor that allows embedding diagrams using the triple-backtick syntax. Here's a GraphViz example:

    ``` diagram-graphviz
    digraph {
        rankdir="LR";
        a -> b -> c;
    }
    ```

In Markdown, formatting a source code snippet entails using the standard syntax for code blocks:

    ``` graphviz
    digraph {
        rankdir="LR"
        a -> b -> c;
    }
    ```

Hello Dominic.

Seconding the question on browserless rendering in the other comment. Having to (unseccessfully for us so far; the text renders incorrectly) tweak selenium setups to do headless builds is madness and I would have thought this to be top prio as a base feature beyond PoC for anything aiming for wide adoption.

Hi there, Mermaid CEO here:)

I hear you on the whiteboard. It's still in its early days. Should be substantially improved in the coming months.

To clarify on mermaidchart.com and mermaid.live, we are the same team. Mermaid.live is our fully open source hosted editor. This was the original editor for our 10 year old open source project. The creator of Mermaid recently founded mermaidchart.com with the CEO of Gitlab's venture studio to expand the capabilities of Mermaid for more users and build an enterprise grade product. The company is open core and venture backed. The Mermaid project will remain forever open source and will continue to invest in growing it and the company for those that desire more advanced business features.

We really appreciate your feedback and support. Ping me if you'd like to chat with our product team about the features you're hoping for:) andrew@mermaidchart.com

I had the exact same set of issues and questions.

> it just wouldn't let me organize/drag things where I wanted, and I couldn't get things to not overlap

I suspect this might be a fundamental issue with mermaid. I've always had issues getting it to lay things out in any other way than how it "wants" me to, with giant gaps between things

We make (and sell) one, you can play with it here: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...

Bigger example: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...

(I don't like to self promo on competitor posts, but since Mermaid doesn't compete in making its own layout engine I felt sharing this under this thread is relevant to HN. If anyone from Mermaid finds it in poor taste just let me know and I'll delete)

Also, some interesting links I stumbled upon while exploring this space:

Graphviz-like generic graph-drawing library. More options, more control.

https://eclipse.dev/elk/

Experiments by the same team responsible for the development of ELK, at Kiel University

https://github.com/kieler/KLighD

Kieler project wiki

https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...

Constraint-based graph drawing libraries

https://www.adaptagrams.org/

JS implementation

https://ialab.it.monash.edu/webcola/

Some cool stuff:

HOLA: Human-like Orthogonal Network Layout

https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf

Confluent Graphs demos: makes edges more readable.

https://www.aviz.fr/~bbach/confluentgraphs/

Stress-Minimizing Orthogonal Layout of Data Flow Diagrams with Ports

https://arxiv.org/pdf/1408.4626.pdf

Improved Optimal and Approximate Power Graph Compression for Clearer Visualisation of Dense Graphs

https://arxiv.org/pdf/1311.6996v1.pdf

Hi! I'm Dominic from the Mermaid product team. You raise some good points here. We released the whiteboard to help users get an exact layout they'd like, but it's in its early stages and is undergoing a lot of improvements.

I understand that automatic layout algos is one of the big draws of Mermaid since it creates a lot of speed, but our current layouts can get a little convoluted. I like your idea on creating a machine learning model, but I'm curious what your biggest pain points are or if you have any basic requirements for a readable and aesthetic diagram. Is it made with hard corners on edges? Rounded?

Would love to hear any thoughts you might have on this! You can email me at dominic@mermaidchart.com if you'd be willing to share. Thanks for your comment!

Thanks @maho! We're hoping to keep the improvements flowing. I'm non-technical but from my perspective I thought Mermaid sequence diagram functionality really shines! Would love to fill the gap in my knowledge. What is better about https://sequencediagram.org/ than Mermaid sequence diagrams?

I've used this in the past for collaborative diagramming sessions and love its ease and simplicity, but the point of Mermaid is its portability - ie. can be embedded in Markdown docs and viewed in various editors/platforms.

Agreed. I’ve tried other editors but so far I’ve always come back to sequencediagram.org — it just works, low fuss.

sequencediagram.org is using PlantUML I believe, so you can do these locally without their website.

Thanks, I uploaded it!

Hi! I'm Akshatha from the Product team at Mermaid Chart :)

While Draw.io's integration with Mermaid and the availability of plug-ins for VSCode and other IDEs are great, they primarily support programmatic editing of diagrams. What sets Mermaid Chart apart is its bi-directional editing capability. You can edit the code to update the diagram and make changes directly to the diagram, which will automatically reflect in the code.

Currently, this two-way editing functionality is available for class diagrams and flowcharts, but we're excited to expand it to other popular diagram types in the future. Stay tuned!

Competition is good for innovation and choice is good for everyone. Does it need to be special?

Yes

Yes! You can use this in the free mermaid playground: https://www.mermaidchart.com/play