Our great sponsors
-
mermaid
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
vscode-drawio
This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.
-
Modelio
Modelio is a modeling solution offering a wide range of functionalities based on the main standards of enterprise architecture, software development and systems engineering.
-
I mainly use diagrams in documentation and not in specification or development (although tools I am learning to use, such as Alloy [0], for specifications do generate diagrams of the state).
In documentation I typically use a mix of ditaa[1], mermaid[2], and graphviz[3]. I used ditaa for architecture diagrams, a mix of sequence, flow chart, and ER diagrams in mermaid to explain protocols or interactions; and I use graphviz usually for datastructures or dependencies, etc.
[1] https://ditaa.sourceforge.net
Flow chart, sequence and class diagrams are the ones I use the most in my current job.
In source, I generally use Mermaid[1] as its syntax is easily maintainable and understandable. As our documentation (mdBook) is written in markdown and can render Mermaid via a plugin[2].
When drawing quick diagrams during online communications, I use Excalidraw[3] as it's easy to use and has a nice whiteboard style to it. When I'm with my team (pre-covid), whiteboard or paper did the trick.
[1]: https://mermaid-js.github.io/ [2]: https://github.com/badboy/mdbook-mermaid [3]: https://excalidraw.com/
Flow chart, sequence and class diagrams are the ones I use the most in my current job.
In source, I generally use Mermaid[1] as its syntax is easily maintainable and understandable. As our documentation (mdBook) is written in markdown and can render Mermaid via a plugin[2].
When drawing quick diagrams during online communications, I use Excalidraw[3] as it's easy to use and has a nice whiteboard style to it. When I'm with my team (pre-covid), whiteboard or paper did the trick.
[1]: https://mermaid-js.github.io/ [2]: https://github.com/badboy/mdbook-mermaid [3]: https://excalidraw.com/
Draw.io is amazing!
It has now been renamed to diagrams.net: https://app.diagrams.net/
Github repo: https://github.com/jgraph/drawio
It's very easy to self-host, especially on Github Pages: https://github.com/jgraph/drawio#running
There's also desktop apps for Windows, GNU/Linux, Mac and Chrome OS: https://github.com/jgraph/drawio-desktop/releases/latest
Draw.io is amazing!
It has now been renamed to diagrams.net: https://app.diagrams.net/
Github repo: https://github.com/jgraph/drawio
It's very easy to self-host, especially on Github Pages: https://github.com/jgraph/drawio#running
There's also desktop apps for Windows, GNU/Linux, Mac and Chrome OS: https://github.com/jgraph/drawio-desktop/releases/latest
I actually make a diagramming library for the web, called GoJS: https://gojs.net
So I make all kinds of diagrams, mostly as demonstrations. When developing an API itself, especially one where there are phases (objects must measure themselves and draw in a certain order, and not more than they need to), state machine-style and flowchart-style diagrams are awfully helpful.
You can find it here: https://marketplace.visualstudio.com/items?itemName=hediet.v...
Like draw.io, it is open source! (https://github.com/hediet/vscode-drawio)
Markdeep[0] from Casual Effects has a way of drawing diagrams using extended markdown.
I used it to write this document with two diagrams: https://loan-free-ed.neocities.org
Other tool I like are PlanetUML[1], BoUML[2] and Modellio[3](it is very heavy though on system resources!)
[0] https://casual-effects.com/markdeep
[2] https://bouml.fr
