TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Mermaid – Generation of diagrams and flowcharts from text

103 pointsby atrudeauover 6 years ago

10 comments

andreareinaover 6 years ago
For anyone interested in generating diagrams from text, I recommend also taking a look at Graphviz[1] and PlantUML[2]. Graphviz excels at box-and-arrow kind of diagrams as well as graphs, I frequently use it to visually map out dependencies, processes and state transitions, etc. There&#x27;s an online version here[3]. PlantUML I use less, both because it&#x27;s slower (you pay the JVM startup tax on every invocation) and because I have less use for the kind of diagrams it specializes in.<p>[1] <a href="https:&#x2F;&#x2F;graphviz.com" rel="nofollow">https:&#x2F;&#x2F;graphviz.com</a><p>[2] <a href="http:&#x2F;&#x2F;plantuml.com" rel="nofollow">http:&#x2F;&#x2F;plantuml.com</a><p>[3] <a href="https:&#x2F;&#x2F;dreampuf.github.io&#x2F;GraphvizOnline&#x2F;" rel="nofollow">https:&#x2F;&#x2F;dreampuf.github.io&#x2F;GraphvizOnline&#x2F;</a>
评论 #19068635 未加载
评论 #19068509 未加载
评论 #19069330 未加载
评论 #19071671 未加载
pritambaralover 6 years ago
We used mermaid.js for a while. I didn&#x27;t like the fact that it worked only in a browser, and installing phantom.js (which installed a whole pre-compiled binary of Chromium) was painful.<p>We also ran into some limitations on how we could control the final display.<p>So we moved all our diagrams to PlantUML and found ourselves quite happy with it.
mch82over 6 years ago
Thanks for sharing! Just tried some UML sequence diagrams and this looks like it’ll be a lot more convenient than other UML tools.<p>Here’s the syntax guide: <a href="https:&#x2F;&#x2F;github.com&#x2F;mermaidjs&#x2F;mermaid-gitbook&#x2F;blob&#x2F;master&#x2F;content&#x2F;sequenceDiagram.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mermaidjs&#x2F;mermaid-gitbook&#x2F;blob&#x2F;master&#x2F;con...</a><p>Edit: And here’s a plugin for VS Code that adds a live render pane to the text editor - <a href="https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=vstirbu.vscode-mermaid-preview" rel="nofollow">https:&#x2F;&#x2F;marketplace.visualstudio.com&#x2F;items?itemName=vstirbu....</a>
JetSpiegelover 6 years ago
This is integrated with Gitlab, you can use it in every textbox.
n1000over 6 years ago
typora.io renders mermaid and some others in markdown documents<p><a href="https:&#x2F;&#x2F;support.typora.io&#x2F;Draw-Diagrams-With-Markdown&#x2F;" rel="nofollow">https:&#x2F;&#x2F;support.typora.io&#x2F;Draw-Diagrams-With-Markdown&#x2F;</a>
评论 #19068698 未加载
achamayouover 6 years ago
I’ve used mermaid for documentation, through plugins for mkdocs and Sphinx. What’s great about it is that the diagrams are stored as readable source text in the documentation, which is easy to diff and modify along with the rest of the doc (search and replace when renaming a component etc).<p>That’s a huge benefit compared to storing rendered bitmaps, with a source file next to them. There’s much more friction involved in keeping those up to date, the changes don’t display usefully in PRs etc. They’re almost never up to date as a result.<p>Another thing mermaid lets you easily do is generate sequence diagrams from code such as testcases, because the format is so simple and line-driven. The outpout can also be included in documentation as samples, and is guaranteed to be up-to-date.
EamonnMRover 6 years ago
We use this to diagram our systems at a high level in documentation. It can be fiddly to get it exactly how you want it but it&#x27;s a lot faster and easier to version control then, say, PowerPoint.
abc3over 6 years ago
Has anyone managed to make decent looking org charts using Mermaid or one of the other text-based diagram generators mentioned in this thread? I&#x27;ve been looking for a way to make it easier for the one person we have who is working in HR to update the org chart each time we make a new hire. As bureaucratic as an org chart can be, keeping our up-to-date makes it easier for new people to figure out who everyone else is, and also helps existing staff figure out where newer employees fit in.
hunta2097over 6 years ago
FYI: Mermaid is supported in Markdown on both GitLab and GitHub.<p>It&#x27;s awesome, I hope they continue to extend it.
评论 #19070123 未加载
leemailllover 6 years ago
Does this offer something different from Ditaa or Graphviz?
评论 #19069340 未加载