kroki
mermaid
Our great sponsors
kroki | mermaid | |
---|---|---|
48 | 119 | |
2,609 | 66,157 | |
4.4% | 2.3% | |
8.8 | 10.0 | |
3 days ago | 3 days ago | |
JavaScript | JavaScript | |
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.
kroki
-
D2 Playground
Pikchr https://pikchr.org/home/pikchrshow is the other general purpose one and older than d2. It is "Source-Code License: 0-clause BSD" as it says on the page.
Someone made it into wasm and put playground for pikchr here https://www.jakethaw.com/pikchr_webassembly_demo/
Can also try pikchr online here on https://kroki.io/#try which is hosting many other text to diagram tools as well.
-
Mermaid Chart, a Markdown-like tool for creating diagrams, raises $7.5M
I use mermaid.js heavily, but plug for Kroki:
“Kroki provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, Symbolator, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz... and more to come!”
- How to draw beautiful software architecture diagrams
-
Nomnoml
If you don't mind my asking, what aspects of "acceptable layout" is usually the first to get busted?
I'm extremely excited about using WireViz[1] to automate wiring harness diagram creation, and if I can, I'd like to know the speedbumps before I hit them. I'm thinkin generous linking between diagrams will be one path.
[1] Project:: https://github.com/wireviz/WireViz SandboxP:: https://kroki.io/#try [select Diagram>WireViz]
-
LaTeX for publishing tabletop role-playing games
The SVG output is embedded into the PDF file.
https://kroki.io/examples.html#mind-map
Kroki has other text-based formats for flow charts, Gantt charts, UML diagrams, packet diagrams, network diagrams, word clouds, etc.
-
Documentation as Code for Cloud Using PlantUML
My cross-platform desktop text editor, KeenWrite, allows users to define variables in an external YAML file. The editor calls out to Kroki[1] to convert text-based diagrams to SVG. The diagrams can reference variables and are rendered using EchoSVG[2].
KeenWrite[3] can produce PDF documentation from Markdown documents that has PlantUML diagrams with elements stored in an external, machine-readable file. Here are screenshots showing variables on the left, diagram text in the middle, and a real-time render on the right:
* https://raw.githubusercontent.com/DaveJarvis/KeenWrite/main/...
* https://raw.githubusercontent.com/DaveJarvis/KeenWrite/main/...
KeenWrite supports all diagrams offered by Kroki, which includes "diagram-plantuml".
[1]: https://kroki.io/
- Pikchr: A PIC-like markup language for diagrams in technical documentation
- MdBook – Create book from Markdown files. Like Gitbook but implemented in Rust
-
Entity Relationship Diagrams
plantuml is amongst the best there is. kroki.io has a sandbox for it mermaid.js can do it in notion, it works as well as any other mermaid. dbvisualizer is fantastic if you have an existing schema in a db instance. you may need the trial license to render the diagrams
-
New ChatGPT diagram plugin
I created a diagramming plugin for fun. This one uses kroki.io to generate diagrams rather than only Mermaid. I've also added a "network" type which gets rendered via networkx and matplotlib on the backend. I would love any feedback if anybody finds it useful or interesting, or issues.
mermaid
-
ChatCraft Adventures #10
Currently, ChatCraft supports Mermaid rendering. This feature request involves adding support for nomnoml rendering. Nomnoml is similar to Mermaid, in that they're both used in generating uml diagrams.
- Ask HN: Anyone use a code to mindmap/flowchart tool?
-
Show HN: Marimo – an open-source reactive notebook for Python
Marimo looks and feels great!
Have you considered adding support for mermaid.js in the markdown? I tried including some mermaid.js in a `mo.md` invocation, but it didn't render the diagram :-)
-
Penrose – Penrose
This feels like the LaTeX version of Mermaid.js [0]. I can do anything with it, but I gotta learn a lot of new syntax. So, really cool! Gonna have to dig into this.
- What website frameworks are used to build these websites?
-
Top 6 tools for text-based UML sequence diagrams
Mermaid is a Javascript-based diagramming tool for rendering many diagram types from Markdown-inspired text definitions and supports sequence diagrams. Mermaid is free and open-source under the MIT license.
-
The Unreasonable Effectiveness of Sequence Diagrams in MermaidJS
I'm one of the maintainers of the mermaid-cli project, and unfortunately, no.
Mermaid needs a browser's layout engine to run properly [1], but I haven't yet seen a library that will help us without puppeteer.
And yep, NPM (or another Node.JS package manager) is still needed for installation. I was working on trying to bundle all of mermaid-cli's dependencies (aka Node.JS, puppeteer) into one massive single-file exe last weekend, but it's seems we're blocked by missing features in other packages [2].
If anyone has any ideas on how to implement these things easily, feel free to help-out :) I'm also not a big fan of puppeteer, so I'd love to see a way to go without it.
[1]: https://github.com/mermaid-js/mermaid/issues/3650
[2]: https://github.com/mermaid-js/mermaid-cli/issues/467#issueco...
-
How to Write a Great Readme
I like using mermaid diagrams [1] in readme files and docs.
They're easier to read than plain text explanations for architectural layouts/customer journeys but easier to modify than images and GIFs.
Also natively supported in many flavours of markdown like Gitlab.
-
Creating Better API Architecture Diagrams
UML is just one format for diagram design specifications. Another option is to use a code to diagram tool like Mermaid. Mermaid transforms plain-text (Markdown inspired text definitions in this case) into full-fleshed visual diagrams. Their tool is open-source and written in JavaScript, making it easy to customize if you’re so inclined. Advantages include:
-
Which tools do you use to create diagrams?
MermaidJS
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.
Mermaid - Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.
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
GoJS, a JavaScript Library for HTML Diagrams - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
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