mermaid
plantuml
Our great sponsors
mermaid | plantuml | |
---|---|---|
103 | 115 | |
58,150 | 8,174 | |
1.8% | 2.5% | |
9.9 | 9.1 | |
2 days ago | 6 days ago | |
JavaScript | Java | |
MIT License | GNU General Public License v3.0 or later |
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?
plantuml
- Which tools do you use to create diagrams?
-
Free Alternatives for Enterprise Architect.
I like https://plantuml.com/, because it is text-based and simple, fulfilling my needs in simple diagrams. Plug-ins dir IDEs exist but there is also a web-viewer/editor.
-
UML representation of the whole flutter framework?
I think it would be much easier to write a parser that generates PlantUML code
- Wie dokumentiere ich meine Server und Applikationen?
-
Best tool for designing system architecture ?
I use https://plantuml.com.
-
Add quick sketches in emacs org mode
I do fancy https://plantuml.com/ in combination with a few yankpad snippets with basic structure/elements to start from.
-
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.
-
Top 7 diagrams as code tools for software architecture
PlantUML is a tool that allows you to write diagrams such as sequence, object, component, usecase, class diagrams and more.
-
What "new-to-you" tool did you recently start using that just changed your workflow for the better?
I haven’t actually used it yet, but I installed the plantuml plugin in PHPStorm yesterday and tinkered with it a bit. I think it will be a very useful communication tool because I can look at the code while I’m making my diagrams.
-
Anyone know if there is a plugin that can help me achieve such a diagram?. The boxes preferrably customizable html elements.?
I've been using plantUML, a little steep learning curve but when you learn it, it's really good. https://plantuml.com/
What are some alternatives?
Mermaid - Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.
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.
excalidraw - Virtual whiteboard for sketching hand-drawn like diagrams
graphviz
Graphviz - Simple Python interface for Graphviz
markdown-preview-enhanced - One of the 'BEST' markdown preview extensions for Atom editor!
gcp-icons-for-plantuml - PlantUML sprites, macros, and other includes for Google Cloud Platform services and resources
vscode-drawio - This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.