Live data from Hacker News

Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

github.com

21–30 of 55 posts

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#22
Word of advice: name your .js file after its versioning (or use ?v=x.y.z in the src), because some updates break older code.

I had to go through all the versions at one point to make my old code work again, because I'd used a remote CDN or something at one point.

Excellent tool otherwise, haven't seen anything better so far.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#25
I was trying to make Graphviz produce all these types of charts using a Markdown DSL for version-control purposes, but like some said, it's kludgy.

I'm mostly interested in a tool that can produce Flowchart, Sequence, Gantt, Dataflow, Class and Database diagrams using nothing but a CLI.

I'd appreciate any recommendations.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#26

How does this compare to graphviz? ( http://www.graphviz.org/ )

The big difference is it's built from the start with web tech.

Looking at it, my biggest criticism is that I would appreciate it more if it did share/piggyback more with graphviz's DOT language. [1]

If it could import/export DOT files it would make it easier to do things like start with Mermaid and migrate to Viz.js or graphviz itself (on a server backend somewhere) if you find for a particular graph you might need different performance characteristics or to use one of graphviz's alternate layout engines (such as a neato or twopi).

(I could especially see a use if it could manage to export its more domain-specific sequence and class diagram formats to "traditional" graphviz digraphs. Nearly all of that formatting is possible with enough work with digraphs in DOT language, but it's not a pleasure to build by hand and a DSL convertable to it would actually be generally useful, I would imagine.)

[1] https://github.com/knsv/mermaid/issues/5 [2]

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#27
post #22

Word of advice: name your .js file after its versioning (or use ?v=x.y.z in the src), because some updates break older code. I had to go through all the versions at one point to make my old code work again, because I'd used a remote CDN or something at one point. Excellent tool otherwise, haven't seen anything better so far.

I disagree: version management of that source is not the job of the JS file but the CDN and/or package manager (npm, jspm, what have you). If the CDN you had been using did not provide a way to version the JS you retrieve from it, I would suggest you look for a better CDN.

I can't say that I've even seen a CDN without versioning support; the closest I've seen is that some READMEs for GitHub packages will suggest the RawGit CDN that reflects the GitHub namespace and point to something like the master branch instead of a version tag. I've sent a PR to correct at least one of those that I had come across, but it's also something to realize that if you are using a CDN like RawGit, check the tag/branch you are using.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#28

draw.io [1] has this hidden under Arrange->Insert->From Text and is also open source [2]. I work on the project. [1] https://www.draw.io [2] https://github.com/jgraph/draw.io

Looks great, is there any other syntax available for more elements than what I am seeing in the docs/example? Either way it looks like a good way to get the basic elements down before editing by hand.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#29

There's also DRAKON Editor. [1] While it's visual and does not have a text markdown form, it provides rules to achieve arbitrarily large readable flow diagrams, and enforces them semi-automatically. [1] https://en.wikipedia.org/wiki/DRAKON

I've been fascinated by DRAKON since I first read about it a few years ago. I don't really have a reason to use it, but for some reason it just seems awesome that a programming language produced by the Russian Space agency is now open source.

DRAKON is an algorithmic visual programming language developed within the Buran space project following ergonomic design principles. The language provides a uniform way to represent flowcharts of any complexity that are easy to read and understand.

The DRAKON Editor, which was released in September 2011, is an implementation of the language available in the public domain. It can be used for creating documentation, or for creating visual programs that can be converted to source code in other languages.

Re: Mermaid: Generate Diagrams and Flowcharts with Markdown Like Syntax

#30
mermaid seems really cool. i first got turned on to it when jdbranham created a diagram plugin for grafana, based on mermaid.

if you're using grafana, it allows you to generate mermaid-powered diagrams powered from your tsdb.

check it out: https://grafana.net/plugins/jdbranham-diagram-panel

Post reply on HN