Diagram languages

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

Capable renders thirty-one diagram languages. You will use three or four, and the rest are here for the day you need one of them.

Each page below says what the language is good at, what it draws, a worked example you can copy, and the traps. If you have no strong preference, start with Mermaid.

#In this section

#Everything under here

MermaidWrite Mermaid in Confluence for flowcharts, sequence, class, state, ER, gantt and more, with a visual editor.PlantUMLWrite PlantUML in Confluence for sequence, class, activity, component, deployment, state and timing diagrams.draw.ioThe Capable editor is draw.io compatible. It renders in the browser and stores XML inside the diagram PNG.ExcalidrawSketch hand drawn whiteboards inside Confluence with Excalidraw, rendered entirely in the browser.BPMNModel BPMN 2.0 processes in Confluence with a real modeller: pools, lanes, gateways, events and properties.DMNBuild DMN 1.3 decision tables and requirement diagrams in Confluence with hit policies and FEEL expressions.GraphVizWrite Graphviz DOT and let the layout engine place the nodes. Best when a graph is generated or large.C4Write C4 context, container and component views as C4-PlantUML text on a Confluence page.D2Write D2 for modern architecture diagrams: containers, icons, SQL tables, classes and sequences.DBMLDocument a database schema with DBML tables, columns, types, enums and relationships written as text.ERDWrite entity relationship diagrams with the compact ERD syntax: entities, attributes, keys and cardinality.StructurizrKeep a C4 model as code with the Structurizr DSL: define the model once and derive every view.NomnomlSketch lightweight UML with Nomnoml: classes, associations and packages in a readable bracket syntax.VegaBuild custom visualizations with Vega when a standard chart type is not enough. Prefer Vega-Lite otherwise.Vega-LitePut charts on Confluence pages with a few lines of Vega-Lite JSON: bar, line, scatter, area and heat map.BlockDiagDraw simple boxes and arrows where a chain of arrows is a whole diagram, and meet the BlockDiag family.ActDiagDraw activity diagrams with swimlanes where each lane block owns its own steps.SeqDiagWrite sequence diagrams with the smallest possible syntax, where an arrow line is a whole message.NWDiagDeclare networks and the nodes on them and let the layout place the subnets for you.PacketDiagMap bit ranges to named protocol header fields and get a wire format diagram automatically.RackDiagDeclare rack units and the equipment in them and get a labelled data center rack elevation.BytefieldDocument binary structures and protocol headers as byte and bit field layouts from a compact spec.WaveDromDescribe clocks, signals and buses as a JSON signal list and get a digital timing waveform.WireVizDeclare connectors, cables and connections in YAML and get a wiring harness diagram with pinouts.SymbolatorGenerate component symbol blocks from VHDL or Verilog source, showing ports, directions and types.TikZRender precise LaTeX TikZ figures. TikZ ships disabled, so an admin turns it on before you can create one.PikchrWrite compact PIC style figures where each object is placed relative to the last.DITAATurn ASCII art into filled boxes with color and shadows, keeping a source that reads as plain text.SVGbobConvert ASCII art into crisp SVG line art, keeping the source readable in any code block or terminal.

Learn one properly. Borrow the rest when you need them.