![Flowchart Flowchart](https://pic1.zhimg.com/v2-9cad272c65e513caa60c454fc72cb8d0_r.jpg)
With the recent adoption of Infrastructure as Code we aim to eliminate theimpudent mismatch of documentation (eg. how is it supposed to look like) and howit actually set up by driving all changes from a textual representation.
While JSON, YAML and HCL does a good job of representing out intent to acomputer it is not easily consumable for humans - unless you live and breath forthese types of configuration languages ?♂️
- Command above generates files into the dist folder and publishes them to npmjs.org. Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries! Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering.
- Splitting diagrams. The newpage keyword is used to split a diagram into several images. You can put a title for the new page just after the newpage keyword. This title overrides the previously specified title if any. This is very handy with Word to print long diagram on several pages. (Note: this really does work.
A diagram does a much better job of conveying information and relationships tous mortal humans but they struggle to keep up with the never ending changes asthey are often hand drawn and a snapshot somewhere in time. Who knows where themaster file for that one Visio diagram is, right?!
Many of the same advanced markdown features are in Typora, meaning that you can type up nicely-formatted notes without ever having to shift your hand to your mouse. Even so, if you want to get a little bit fancy, Typora supports tables, diagrams, mathematical formats, footnotes, code fences, and task lists. Typora Pricing: Free app: Yes, during.
What if we could generate our diagrams in the same way as we generate ourinfrastructure?
This post aims to give an overview of the current state of diagram tools thatsupport some kind of Diagram as Code functionality. Lets dig in! ?
Overview
Bellow is a table over the most popular tools with support for Diagram as Code.We have included some popular proprietary tools in the list but will leave it asan exercise to the reader to explore those as this post will focus on those thatare free and open source. Djay pro v1 3 1 download free.
Tool | Diagram Language | License | Local | Online |
---|---|---|---|---|
Graphviz | DOT | Eclipse Public License 1.0 | ✅ | ✅ |
PlantUML | Text | GPL-3.0 | ✅ | ✅ |
Mermaid | Text | MIT License | ✅ | ✅ |
Ditaa | ASCII | LGPL-3.0 | ✅ | ❌ |
WSD | Text | ❌ | ❌ | ✅ |
code2flow | Text | ❌ | ❌ | ✅ |
Structurizr | Java, .NET | ❌ | ❌ | ✅ |
Graphviz (Live Demo)
Rock solid, and bindings for just about every language!
Graphviz is an open source graph visualization software written in C. It hasseveral main layout programs. It also has web and interactive graphicalinterfaces, and auxiliary tools, libraries, and a rich set of language bindings.The main project itself is not investing in graphical user interface editors,but leaving that up to the community to incorporate Graphviz. This results inGraphviz often being perceived as a little more low-level compared with theothers.
The Graphviz layout programs take descriptions of graphs in a simple textlanguage named DOT, and make diagrams in useful formats, such as images and SVGfor web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
Graphviz has many useful features for concrete diagrams, such as options forcolors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.
In practice, graphs are usually generated from an external data sources, butthey can also be created and edited manually, either as raw text files or withina graphical editor. (Graphviz was not intended to be a Visio replacement, so itis probably frustrating to try to use it that way.)
Example diagram
PlantUML (Live Demo)
Biffy clyro only revolutions zip free. PlantUML is, imho, the most efficient and maintainable way to produce UMLdiagram.
PlantUML is another trued and true tool used written in Java to draw primarilyUML diagrams, using a simple and human readable text description. Be careful,because it does not prevent you from drawing inconsistent diagrams (such ashaving two classes inheriting from each other, for example). So it’s more adrawing tool than a modeling tool.
PlantUML has its own simple, but powerful, domain specific language (DSL) thatallows for a lot of different types of UML diagrams:
![Typora mermaid Typora mermaid](https://applech2.com/wp-content/uploads/2016/08/Typora-flowchart-diagram.jpg)
- Sequence diagrams
- Usecase diagrams
- Class diagrams
- Activity diagrams
- Component diagrams
- State diagrams
- Object diagrams
- Deployment diagrams
- Timing diagrams
Also, it supports some non-UML diagrams which are pretty cool, for example theWireframe diagrams for UI design. Fun fact some of the diagrams in PlantUML isactually powered by Graphviz.
PlantUML is also supported in GitLabmarkdownand there is an integration for VSCode,Atom,MediaWiki, GoogleDocsas well as Microsoft Word to mention a few and thisgreatly expends its usefulness!
PlantUML is primarily an UML drawing tool, and maybe the best there is. However,it is starting to show it’s age along with the JVM, it’s lack of modern diagramstyling and web integrations.
Example Diagram
Mermaid (Live Editor)
Mermaid lets you easily do is generate sequence diagrams from code such astest-cases, because the format is so simple and line-driven ✨
Markdown Flowchart
Mermaid is a diagram tool built for the web-era with native JavaScript supportjust include the js file and start rendering diagrams real time. It does notsupport as many diagrams as it’s competitors (yet) but it is completelythemeable and has a rich and powerful syntax.
Mermaid is not a particular UML tool but rather a more general purpose diagramtool and supports the following diagrams:
Comparing with Visio and similar applications, mermaid is a really fast way tocreate good visualizations. This is especially apparent when editing a complexvisualization, this could take hours in traditional tool but takes minutes (oreven less if generation has been scripted) with mermaid.
Mermaid also has support for Graphviz’s dot graph notation which makes it supereasy to reusing existing diagrams and it is fully integrated withhttps://docs.gitlab.com/ee/user/markdown.html! It has a VSCode,Atom, GoogleChrome,Confluenceextensions and the typora.io markdown editor comes withfull Mermaid diagram support out of the box.
Memaid’s strongest suite is it’s simplicity and modern look and feel. Forfrontend developers this would be like any other JavaScript library. It’sstrongest suite is also it’s disadvantage requiringPhantomJS (and thus 500 MB of compiled Chromium) inorder to render diagrams from the command line.
Example Diagram
Mermaid syntax guide.
graph TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]
NB! The above diagram is rendered live using the latest version of Mermaidinkluded in this blogpost - just take a look at the source code.
Closing Remarks
Typora Diagram
While some of these tools mentioned in this post is quit mature at this point weare not happy with the current state of integrating them with other tools in theIaC ecosystem. Our wish for 2020 is that some of these integrations will happen!
Typora Mermaid
Happy diagramming! ?
Discuss on Hacker News