
Mermaid – Generation of diagrams and flowcharts from text - atrudeau
https://mermaidjs.github.io/mermaid-live-editor
======
andreareina
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's an online version
here[3]. PlantUML I use less, both because it'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.

[1] [https://graphviz.com](https://graphviz.com)

[2] [http://plantuml.com](http://plantuml.com)

[3]
[https://dreampuf.github.io/GraphvizOnline/](https://dreampuf.github.io/GraphvizOnline/)

~~~
metaphor
A quick correction to citation:

[1] [https://www.graphviz.org/](https://www.graphviz.org/)

------
pritambaral
We used mermaid.js for a while. I didn'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.

We also ran into some limitations on how we could control the final display.

So we moved all our diagrams to PlantUML and found ourselves quite happy with
it.

------
mch82
Thanks for sharing! Just tried some UML sequence diagrams and this looks like
it’ll be a lot more convenient than other UML tools.

Here’s the syntax guide: [https://github.com/mermaidjs/mermaid-
gitbook/blob/master/con...](https://github.com/mermaidjs/mermaid-
gitbook/blob/master/content/sequenceDiagram.md)

Edit: And here’s a plugin for VS Code that adds a live render pane to the text
editor -
[https://marketplace.visualstudio.com/items?itemName=vstirbu....](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-
mermaid-preview)

------
JetSpiegel
This is integrated with Gitlab, you can use it in every textbox.

------
n1000
typora.io renders mermaid and some others in markdown documents

[https://support.typora.io/Draw-Diagrams-With-
Markdown/](https://support.typora.io/Draw-Diagrams-With-Markdown/)

~~~
sorokod
Not "in" markdown documents but "from". In the documents the diagram markdown
is rendered as itself . When exporting markdown to pdf for example, the
diagram markdown is rendered as a diagram.

------
achamayou
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).

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.

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.

------
EamonnMR
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's a lot faster and easier to
version control then, say, PowerPoint.

------
abc3
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'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.

------
hunta2097
FYI: Mermaid is supported in Markdown on both GitLab and GitHub.

It's awesome, I hope they continue to extend it.

~~~
jaxn
Can you provide a source for Github support? I have looked before and been
unable to find a way to use Mermaid in Github markdown.

~~~
hunta2097
Wow - you are correct.

I must have imagined it.

GitLab FTW!

------
leemailll
Does this offer something different from Ditaa or Graphviz?

~~~
jalk
Sequence diagrams for one. You could probably do those in graphviz but not
without serious fiddeling/invisible nodes and other tricks that would make
your source far from being succinct, which is kind of the whole point

~~~
pritambaral
PlantUML supports sequence diagrams, and a whole lot else.

