1. Diagrams
Turn python code into cloud system architecture diagrams
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F06e806e5-b595-4674-8b3d-2b651ded8cce%252FDiagrams.jpeg%3Ftable%3Dblock%26id%3D30218cbc-dbe5-4456-aba8-2f33c5f861e5%26cache%3Dv2&w=3840&q=75)
2. Mermaid
Generation of diagram and flowchart from text in a similar manner as markdown.
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F2337ef0d-d1ca-4988-83ca-e5b2187ae8e4%252FMermaid.jpeg%3Ftable%3Dblock%26id%3D71a016bc-79b6-47fe-842f-34df4045fc40%26cache%3Dv2&w=3840&q=75)
3. ASCII editor
Free editor: Asciiflow, dot-to-ascii
Paid editor: Monodraw
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fbc26b382-f74c-4d72-b179-fef8347b8c18%252FAscii.jpeg%3Ftable%3Dblock%26id%3Da918439f-b2f5-48a7-9533-cb2d6d10dcb5%26cache%3Dv2&w=3840&q=75)
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fd9d043eb-ac37-4f20-a403-9f204e981687%252FAsciiRes.jpeg%3Ftable%3Dblock%26id%3Dca74d822-3dba-47f8-af9f-44e6a73d50b4%26cache%3Dv2&w=3840&q=75)
4. PlantUML
It is an open-source tool allowing users to create diagrams from plain text language.
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F2cba1229-e15d-41fc-993d-e0c8457716bf%252FplantUML.jpeg%3Ftable%3Dblock%26id%3Ddaadae88-d220-4b06-b31d-c95b25ebde39%26cache%3Dv2&w=3840&q=75)
5. Markmap
Visualize your Markdown as mindmaps. It supports the VS code plugin. Markmap makes it easy to create mindmaps from Markdown. It is an open source project and supports a wide range of editors, including VS Code. It offers many features, such as customizable themes, export to various image formats and the ability to create custom nodes.
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb790f378-3695-41b5-b727-15a50aef9942%252Fmarkmap.jpeg%3Ftable%3Dblock%26id%3Da0374e64-4b36-4a85-92a5-04436200d489%26cache%3Dv2&w=3840&q=75)
6. Go diagrams
Create beautiful system diagrams with Go
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F2479ac39-e6ac-4a66-94f3-a6776a7361a7%252Fgo_diagram.jpeg%3Ftable%3Dblock%26id%3D9b4bdcd9-dc25-4a5b-a417-7e0b071b9c6b%26cache%3Dv2&w=3840&q=75)
7. D2
D2 is a modern diagram scripting language that turns text to diagrams
# Actors hans: Hans Niemann defendants: { mc: Magnus Carlsen playmagnus: Play Magnus Group chesscom: Chess.com naka: Hikaru Nakamura mc -> playmagnus: Owns majority playmagnus <-> chesscom: Merger talks chesscom -> naka: Sponsoring } # Accusations hans -> defendants: 'sueing for $100M' # Offense defendants.naka -> hans: Accused of cheating on his stream defendants.mc -> hans: Lost then withdrew with accusations defendants.chesscom -> hans: 72 page report of cheating
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fe5285759-a399-48b1-ad68-79e93b0c06b7%252FUntitled.png%3Ftable%3Dblock%26id%3D7fb41514-3d20-43d7-b07d-0a2c50fa2128%26cache%3Dv2&w=3840&q=75)
8. Graphviz
Graphviz is a C-based graph visualization software born at AT&T Bell Labs in 1991. It uses a variety of layout algorithms to cover a wide breadth of domains such as UML diagrams, code dependency graphs, network maps, mind maps, and more.
digraph G { // Actors hans [label="Hans Niemann"] subgraph cluster_0 { label="defendants" mc [label="Magnus Carlsen"] playmagnus [label="Play Magnus Group"] chesscom [label="Chess.com"] naka [label="Hikaru Nakamura"] mc -> playmagnus [label="Owns majority"] playmagnus -> chesscom [label="Merger talks", dir="both"] chesscom -> naka [label="Sponsoring"] } // Accusations // NOTE: hack to get subgraph edges working hans -> mc [lhead=cluster_0, label="sueing for $100M"]; // Offense naka -> hans [label="Accused of cheating on his stream"] mc -> hans [label="Lost then withdrew with accusations"] chesscom -> hans [label="72 page report of cheating"] }
![notion image](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fd720bb3c-8afe-4855-9921-a8bebc1d2a8d%252FUntitled.png%3Ftable%3Dblock%26id%3D53dd2e79-0e06-437b-abfc-d290fa0a937b%26cache%3Dv2&w=3840&q=75)
9. Pintora
An extensible text-to-diagrams library that works in both browser and node.js
sequenceDiagram title: Sequence Diagram Example autonumber participant [<actor> User] User->>Pintora: Draw me a sequence diagram(with DSL) activate Pintora Pintora->>Pintora: Parse DSL, draw diagram alt DSL is correct Pintora->>User: Return the drawn diagram else DSL is incorrect Pintora->>User: Return error message end deactivate Pintora @note left of Pintora Different output formats according to render targets 1. In browser side. output SVG or Canvas 2. In Node.js side. output PNG file @end_note
Reference
awesome-diagramming
shubhamgrg04 • Updated Jul 7, 2024
diagrams
mingrammer • Updated Jul 7, 2024