Browse Diagram Types & Syntax Templates
Find the perfect layout for your technical documentation. Explore our complete library of diagram types across PlantUML, Mermaid.js, and Graphviz. Click on any diagram card below to access step-by-step syntax guides, live code blueprints, and real-world examples.
What is PlantUML?
PlantUML is an open-source, text-based tool used to create clear and detailed software architecture diagrams. Instead of manually drawing boxes and dragging arrows in a graphic editor, developers write simple, human-readable code scripts that PlantUML automatically converts into professional images.
It is heavily favored by software engineers and database administrators for complex modeling tasks. It excels at generating highly technical diagrams, including Unified Modeling Language (UML) class layouts, database schemas (Entity-Relationship diagrams), and intricate sequence workflows that trace how data moves through a system.
What is Mermaid.js?
Mermaid.js is a modern, JavaScript-based diagramming tool that lets you generate smart visual charts directly inside web browsers and documentation platforms using simple, markdown-like text. Because it runs purely on web code, it allows teams to update diagrams dynamically without uploading new image files every time a system changes.
It is highly popular for technical documentation sites, wikis, and markdown files. Mermaid.js makes it easy for anyone to quickly sketch out system architectures, project timelines, flowcharts, and development git branches using straightforward text commands that render instantly on the screen.
Flowchart Diagram
Class Diagram
Sequence Diagram
ERD Diagram
State Diagram
Mind Map
Gantt Chart
Quadrant Chart
Timeline
User Journey
Venn Diagram
Pie Chart
Ishikawa Diagram
Treemap Diagram
Sankey Diagram
XY Chart
Kanban Board
Wardley Map
Event Modeling
Architecture Diagram
Packet Diagram
Block Diagram
Requirement Diagram
C4 Diagram
GitGraph Diagram
What is Graphviz?
Graphviz (short for Graph Visualization Software) is a powerful, veteran open-source tool designed to automatically layout structural information represented as diagrams of abstract graphs and networks. It uses a straightforward scripting language called the DOT language to handle the layout math for you.
It is best suited for mapping out highly complex networks, massive data structures, web site maps, and automated dependency trees. Instead of organizing blocks manually, you simply feed Graphviz a list of items and their connections, and its advanced layout algorithms instantly figure out the neatest way to arrange them without overlapping lines.
What is ECharts?
From basic bar graphs and pie charts to advanced multi-layered Sankey diagrams and heatmaps, ECharts handles heavy datasets effortlessly while offering features like dynamic zooming, interactive legends, and smooth animations out of the box.
Column Chart
Column Chart (Grouped)
Column Chart (Stacked)
Bar Chart
Bar Chart (Grouped)
Bar Chart (Stacked)
Line Chart
Area Chart
Area Chart (Stacked)
Pie Chart
Doughnut Chart
Sunburst Chart
Treemap Chart
Tree Chart
Sankey Chart
Funnel Chart
Boxplot Chart
Candlestick Chart
Scatter Chart
Parallel Chart
Heatmap Chart
Radar Chart
Graph Chart
Nightingale (Rose) Chart
Gauge Chart
Pictorial Bar Chart
Theme River Chart
Calendar Chart
What is Markmap?
Markmap is a tool that automatically parses standard Markdown text (like headers, bullet points, and lists) and transforms it into visual, interactive mind maps. Interactive Canvas: Unlike a static image, the rendered mind map is fully interactive—you can click to collapse/expand sub-trees, zoom in/out, and pan around the board.
