Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: GUI for editing Mermaid class diagrams

docs.mermaidchart.com

Post reply on HN
Print view View original

31–40 of 64 posts

Re: Show HN: GUI for editing Mermaid class diagrams

#31

Post by dominicdewalt »

Hi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback!

It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: (https://calendly.com/dominic-01w/mermaid-shapers-product-int...)

Thanks for taking a look at our latest release!

Re: Show HN: GUI for editing Mermaid class diagrams

#32

Post by dominicdewalt »

LordDragonfang wrote: post #17
philfreo wrote: post #10

I spent some time playing around with this recently and loved it at first. I also realized ChatGPT is pretty good at generating Mermaid diagrams (didn't try your own AI features). However after getting into it some I ran into some significant frustrations. After creating a medium-complexity diagram, I was excited to see the Whiteboard feature to drag things around / improve the layout manually. But it really started…

> 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

This is definitely a gap in current Mermaid functionality. This is a gap we're aiming to close in 2025. Significant Whiteboard improvements and expanded diagram support is on the way! If you have a specific use case or diagram type you'd like us to keep in mind then let me know! dominic@mermaidchart.com

Thanks for your comment:)

Re: Show HN: GUI for editing Mermaid class diagrams

#33

Post by dominicdewalt »

bastardoperator wrote: post #25
Xmd5a wrote: post #23

Earlier quoted context omitted.

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 htt…

I settled on excalidraw via obsidian https://github.com/zsviczian/obsidian-excalidraw-plugin

This is really impressive! Excalidraw does some great work. Did you try Mermaid's integration with Obsidian? What was lacking and what ultimately hooked you on Excalidraw?

Re: Show HN: GUI for editing Mermaid class diagrams

#34

Post by dominicdewalt »

maho wrote: post #2

Nice! I love how mermaid keeps getting better! For sequence-diagrams, nothing beats https://sequencediagram.org/ (I am not connected with them in any way, just a happy user)

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?

Re: Show HN: GUI for editing Mermaid class diagrams

#35

Post by bastardoperator »

dominicdewalt wrote: post #33
bastardoperator wrote: post #25

Earlier quoted context omitted.

I settled on excalidraw via obsidian https://github.com/zsviczian/obsidian-excalidraw-plugin

This is really impressive! Excalidraw does some great work. Did you try Mermaid's integration with Obsidian? What was lacking and what ultimately hooked you on Excalidraw?

I do use mermaid quite a bit in markdown because it's documentation/code that can be updated, the idea tends to start in my notes as excalidraw, and eventually become a mermaid graph. I wouldn't say it's lacking anything. I have not tried it so I can't a valid opinion, but I am happy to give it a try and give some feedback. I do waste time converting. I see a couple of tools, do you recommend one in particular?

Re: Show HN: GUI for editing Mermaid class diagrams

#36

Post by dominicdewalt »

Xmd5a wrote: post #22

I only use diagramming tools with automatic layout algos to generate visualizations programmatically to debug things. For documentation purpose, I largely prefer to draw them by hand using OmniGraffle, because making graphs look nice using tools like graphviz is very complex and you find yourself abusing features to hack your vision into reality What's dearly needed in my opinion is a graph layout algo based on a mac…

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!

Re: Show HN: GUI for editing Mermaid class diagrams

#37

Post by junto »

terrastruct wrote: post #26
Xmd5a wrote: post #22

I only use diagramming tools with automatic layout algos to generate visualizations programmatically to debug things. For documentation purpose, I largely prefer to draw them by hand using OmniGraffle, because making graphs look nice using tools like graphviz is very complex and you find yourself abusing features to hack your vision into reality What's dearly needed in my opinion is a graph layout algo based on a mac…

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 le…

Is it possible to visualize PlantUML? I tried to paste some but it wasn’t very easy on mobile.

Re: Show HN: GUI for editing Mermaid class diagrams

#38

Post by thangalin »

dominicdewalt wrote: post #31

Hi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback! It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: ( https://calend…

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

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

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;
    }
    ```
KeenWrite parses the `diagram-` prefix then passes the word `graphviz` to Kroki (https://kroki.io/), which has an API for rendering a variety of ASCII diagrams, including Mermaid. Meaning, if Kroki adds a new diagram type, KeenWrite gets it for free (without modification).

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

    ``` graphviz
    digraph {
        rankdir="LR"
        a -> b -> c;
    }
    ```
GitHub created a de facto standard for Mermaid diagrams that breaks the convention of having triple-backticks followed by a language identifier to show the source code for that language in a monospace font. This was an unfortunate decision.

Re: Show HN: GUI for editing Mermaid class diagrams

#39

Post by [deleted] »

thangalin wrote: post #38
dominicdewalt wrote: post #31

Hi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback! It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: ( https://calend…

Any idea when Mermaid diagrams will render outside of web browsers? https://github.com/mermaid-js/mermaid/issues/2485 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; } ``` KeenWrite parses the `diagram-` prefix then passes the word…

[deleted]

Re: Show HN: GUI for editing Mermaid class diagrams

#40

Post by baobun »

dominicdewalt wrote: post #31

Hi all, I'm Dominic and I'm on the product team at Mermaid. I enjoyed reading a lot of your feedback! It seems there's several good ideas and thoughts on the direction of the platform that we'd love to learn more about. If you have problems with the current product, improvement requests, or would like to chat then let's connect! Please email me at dominic@mermaidchart.com or book time on my calendar: ( https://calend…

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.

Post reply on HN