mermaid
Graphviz
Our great sponsors
mermaid | Graphviz | |
---|---|---|
103 | 0 | |
58,150 | 1,400 | |
1.8% | - | |
9.9 | 7.5 | |
2 days ago | 24 days ago | |
JavaScript | Python | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
mermaid
-
Which tools do you use to create diagrams?
MermaidJS
-
Diagrams as Code
Another solution which I prefer is - maintaining diagrams as code which live in the same repos as the code. There are many tools these days which help us author diagrams from code. My favorites are Mermaid and PlantUML. Now your code can live in the repo and evolve along with the codebase. You might need to do additional setup if you'd like the diagrams to be generated as part of your CI/CD. I like to maintain these in a /docs folder within the project repo.
-
Mermaid Cheat Sheet
Individual diagrams have their grammar in a .jison file.
Flowchart: https://github.com/mermaid-js/mermaid/blob/develop/packages/...
A single grammar to support all the different use cases would be challenging. But we did have some plans to introduce guidelines to make different diagram syntaxes more consistent.
This would really be a good UX improvement.
But the implementation might be a little tricky.
Please raise an issue so we can discuss further, and add it to roadmap if feasible.
-
A command line tool that draw plots on the terminal
This is so cool. It reminds me of Markdown and Mermaid (https://github.com/mermaid-js/mermaid), which can do a similar thing within a plain text file. Keep it up; looking forward to trying it out.
-
Architecture diagrams should be code
KeenWrite[0], the FOSS Markdown text editor I’ve been working on, includes the ability to render plain text diagrams via Kroki[1]†. See the screenshots[2] for examples. Here’s a sample Markdown document that was typeset[3] using ConTeXt[4] (and an early version of the Solare[5] theme).
One reason I developed KeenWrite was to use variables inside of plain text diagrams. In the genealogy diagram, when any character name (that’s within the diagram) is updated, the diagram regenerates automatically. (The variables are defined in an external YAML file, allowing for integration with build pipelines.)
Version 3.x containerizes the typesetting system, which greatly simplifies the installation instructions that allow typesetting Markdown into PDF files. It also opens the door to moving Kroki into the container so that diagram descriptions aren’t pushed over the Internet to be rendered.
†Kroki, ergo KeenWrite, supports BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), Ditaa, Erd, Excalidraw, GraphViz, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, UMLet, Vega, Vega-Lite, and WaveDrom.
Note that Mermaid diagrams generate non-conforming SVG[6], so they don’t render outside of web browsers. There is work being done to address[7] this problem.
[0]: https://github.com/DaveJarvis/keenwrite
[1]: https://kroki.io/
[2]: https://github.com/DaveJarvis/keenwrite/blob/main/docs/scree...
[3]: https://pdfhost.io/v/4FeAGGasj_SepiSolar_Highlevel_Software_...
[4]: https://wiki.contextgarden.net/Main_Page
[5]: https://github.com/DaveJarvis/keenwrite-themes/
-
18 Best JavaScript Gantt Chart Components
Useful resources: GitHub repository Package size: 24.9 MB License: MIT
-
Looking for people to join a coding community
Or, this one: https://github.com/mermaid-js/mermaid
- Can Anyone Recommend a Good Diagramming App?
Graphviz
We haven't tracked posts mentioning Graphviz yet.
Tracking mentions began in Dec 2020.
What are some alternatives?
plantuml - Generate diagrams from textual description
C4-PlantUML - C4-PlantUML combines the benefits of PlantUML and the C4 model for providing a simple way of describing and communicate software architectures
aws-icons-for-plantuml - PlantUML sprites, macros, and other includes for Amazon Web Services services and resources
draw.io - draw.io is a JavaScript, client-side editor for general diagramming and whiteboarding
d2 - D2 is a modern diagram scripting language that turns text to diagrams.
matplotlib - matplotlib: plotting with Python
plotly - The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams
graphviz
diagrams - :art: Diagram as Code for prototyping cloud system architectures
pydot - Python interface to Graphviz's Dot language
markdown-preview-enhanced - One of the 'BEST' markdown preview extensions for Atom editor!