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

Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

github.com

Post reply on HN
Print view View original

51–60 of 110 posts

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#51

Post by paul_h »

smhanov wrote: post #33
smusamashah wrote: post #2

I have an almost exhaustive list [1] of browser based text to diagram tools. Some specialised tools (like https://sequencediagram.org/ ) so much better at what they do than any generic ones like mermaid. [1] https://xosh.org/text-to-diagram/

I wish WebSequenceDiagrams was further up your list. I guess I have some work to do. When I made it, nothing like mermaid, plantUML，lucid charts existed. The syntax of most tools was based on Java or graphviz and overly verbose. I was writing an email to a colleague at BlackBerry and wrote out the sequence diagrams as text. I spent the next week making a script to convert it to an image and put it online. Many other…

Great tech - thanks for your pioneering work. I made https://vsm-book.com/app as a tool to support a meeting and leave a lasting artifact. WebSequenceDiagrams (and https://bramp.github.io/js-sequence-diagrams/ which also credits yours) was very much in my mind, though my grammer is much less elegant.

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#52

Post by paul_h »

I just used Mermaid for multiple sequence diagrams from build-steps sequences in a video talk I did on comparing build systems - https://www.youtube.com/watch?v=L67ri_xe2oQ (slides - https://paulhammant.com/google-style-dag-build-systems/). The new boost for me was GPT4o. It was able to quickly make what I wanted from the build logs alone, though it took some hand tweaking too. A new (or very old) problem after that was not taking sufficient save points (URL bookmarks) and sometimes making the same edit twice cos I'd lost a URL. That there was a second save of the PNG form for each (https://kroki.io/mermaid/svg/...) added to the keep-track-of-changes problem for me, especially when I'm very tired me :(

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#53

Post by patrickk »

jdougan wrote: post #24
NightMKoder wrote: post #13

IMO mermaid is awesome, but for two somewhat indirect reasons: - There’s an almost wysiwig editor for mermaid at https://www.mermaidchart.com/play . It’s very convenient and appropriately changes the layout as you draw arrows! - Notion supports inline mermaid charts in code blocks (with preview!) It’s awesome for putting some architecture diagrams in Eng docs.

Obsidian also supports inline mermaid charts in markdown code blocks. One of those features I don't see mentioned much.

LLMs (I use ChatGPT) can take a generic process description, spit out the result in mermaid, which can then be imported and refined in something like draw.io. Yes, you’ll have to correct a few things by hand, but it drastically speeds things up. Last time I check draw.io is supported in obsidian.

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#55

Post by SkyPuncher »

NightMKoder wrote: post #13

IMO mermaid is awesome, but for two somewhat indirect reasons: - There’s an almost wysiwig editor for mermaid at https://www.mermaidchart.com/play . It’s very convenient and appropriately changes the layout as you draw arrows! - Notion supports inline mermaid charts in code blocks (with preview!) It’s awesome for putting some architecture diagrams in Eng docs.

Github supports inline mermaid charts, too!

I've been starting to include them in my bigger PRs and reviewers really like them.

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#56

Post by nine_k »

jillesvangurp wrote: post #46
LifeIsBio wrote: post #17

One of my favorite applications of multimodal LLMs thus far is the ability to: 1. Draw a DAG of whatever pipeline I’m working on with pen and paper. 2. Take a photo of the graph, mistakes and all. 3. Ask ChatGPT to translate the image into mermaid.js Given how complicated the pipelines are that I’m working with and the sloppiness of the hand drawn image, it’s truly amazing how well this workflow works.

I recently did a variation of this where instead of drawing, I just drafted a quick few bullet points and text describing at a high level what the system should do. And then I asked chat GPT to identify use cases and generate sequence diagrams for each use case in puml format (plantuml). Shockingly effective and it took about five minutes. This was a technical proposal that I shared with a few partner companies to pr…

> write only documentation (nobody will ever read or truly value it)

But what's the point of producing such documentation? I could imagine that the process of creating it could be somehow beneficial (committing to memory, finding discrepancies, etc). If it's not, why can't it just be skipped?

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#57

Post by nine_k »

taklimakan wrote: post #48
donatj wrote: post #25

I don't love Mermaid and generally find it less well designed than something like Graphviz/dot. I generally find a lot of the syntax needlessly strict for something non-programmer humans are meant to interact with, but the big seller for me with Mermaid is that it works inline on GitHub. I end up creating a lot of sequence diagrams and having them as editable mermaid is very convenient. I do wish GitHub giant mermaid…

I was under the impression mermaid is a wrapper around graphviz dot.

No, it's an independent, JS-only implementation, and it's way, way less featureful.

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#58

Post by nine_k »

ngm7 wrote: post #28

I'm slightly surprised excalidraw ( https://excalidraw.com/ ) is not in the comments. I use it regularly to convey ideas to my devs and designers. Plus, it exports to json! Someone wrote a library to convert mermaid to excalidraw as well. We're now experimenting with creating design questions to ask in interviews with excalidraw/mermaid

I love excalidraw. But does it have an editable, diffable textual representation? Can it be generated with little ceremony, and laid out automatically?

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#59

Post by butz »

smusamashah wrote: post #2

I have an almost exhaustive list [1] of browser based text to diagram tools. Some specialised tools (like https://sequencediagram.org/ ) so much better at what they do than any generic ones like mermaid. [1] https://xosh.org/text-to-diagram/

I was wondering, are there any tools that could help to draw decent looking genealogical tree ? My main issue are the updates, where adding one of the ancestors or newborns causes full rework of entire tree. I'd like to feed data to some script and have it render a family tree, with all the regular updates.

Re: Mermaid: Generation of diagrams like flowcharts or sequence diagrams from text

#60

Post by baq »

nine_k wrote: post #56
jillesvangurp wrote: post #46

Earlier quoted context omitted.

I recently did a variation of this where instead of drawing, I just drafted a quick few bullet points and text describing at a high level what the system should do. And then I asked chat GPT to identify use cases and generate sequence diagrams for each use case in puml format (plantuml). Shockingly effective and it took about five minutes. This was a technical proposal that I shared with a few partner companies to pr…

> write only documentation (nobody will ever read or truly value it) But what's the point of producing such documentation? I could imagine that the process of creating it could be somehow beneficial (committing to memory, finding discrepancies, etc). If it's not, why can't it just be skipped?

Documentation is a tool for creating shared understanding. If you don’t need to share your understanding, don’t write docs.

Note however that sharing understanding works on the people axis and on the time axis. Docs allow you to share your current understanding with your future self. They’d better be general enough to be true then, though.

Nowadays I find Gemini pro to be able to accurately document a complex workflow within minutes just by looking at the sources and sometimes even just logs, so value of low level docs is questionable. High level requirements - essentially how it’s supposed to work and what for - is very valuable, as it allows you and the model to cross check whether things work as they were intended.

Post reply on HN