1# diagram.zip documentation23> Choose the semantic story first. Use Source for notation and Details for metadata and presentation. Generated SVG and renderer internals are output, not authoring controls.45- [Diagram routing skill](https://docs.diagram.zip/skills/diagramming/SKILL.md): Select a diagram family from the reader's question.6- [Machine-readable semantic catalog](https://docs.diagram.zip/diagram-skills.json): Inspect every skill, use case, exclusion, role, and invocation constraint.78## Routing and collaboration910- [Choose a diagram](https://docs.diagram.zip/skills/diagramming/SKILL.md): Choose the semantic diagram story first, then select a diagram.zip renderer and produce a clear, reviewable diagram.11- [Diagram workshop](https://docs.diagram.zip/skills/diagram-workshop/SKILL.md): Work with me to discover the right diagram question, audience, scope, and level of detail before making a diagram. Explicit user invocation only.12- [Review a diagram](https://docs.diagram.zip/skills/diagram-review/SKILL.md): Review a proposed diagram for semantic fit, evidence, readability, accessibility, and renderer or standards limitations; recommend precise revisions.1314## Behavior and process1516- [Flowchart](https://docs.diagram.zip/skills/flowchart/SKILL.md): Choose a flowchart when the user needs a readable decision or process path with a clear start, sequence, branch, merge, or end.17- [Sequence diagram](https://docs.diagram.zip/skills/sequence-diagram/SKILL.md): Choose a sequence diagram when the user needs to explain ordered messages, calls, responses, or time-dependent collaboration between participants.18- [State machine diagram](https://docs.diagram.zip/skills/state-machine-diagram/SKILL.md): Choose a state-machine diagram when an entity's permitted states, event-triggered transitions, guards, and entry or exit behavior are the central story.19- [Activity diagram](https://docs.diagram.zip/skills/activity-diagram/SKILL.md): Choose an activity diagram when the user needs to explain workflow logic, parallel work, decisions, joins, and responsibility across actions.20- [BPMN process](https://docs.diagram.zip/skills/bpmn-process/SKILL.md): Choose BPMN when the user needs a formal business-process model with events, tasks, gateways, pools, lanes, and message or sequence flows.21- [Use-case diagram](https://docs.diagram.zip/skills/use-case-diagram/SKILL.md): Use when the user needs to explain who can achieve which externally visible goals with a system, including actors, system boundaries, and goal relationships.22- [Data-flow diagram](https://docs.diagram.zip/skills/data-flow-diagram/SKILL.md): Use when the user needs to show where information originates, how processes transform it, where stores retain it, and which external entities exchange it.23- [Timeline](https://docs.diagram.zip/skills/timeline/SKILL.md): Use when the user needs to communicate events or milestones in chronological order, with dates, intervals, eras, or parallel tracks.24- [Gantt chart](https://docs.diagram.zip/skills/gantt-chart/SKILL.md): Use when the user needs a time-scaled schedule showing tasks, durations, dependencies, milestones, and progress across teams or workstreams.25- [User journey map](https://docs.diagram.zip/skills/user-journey-map/SKILL.md): Use when the user needs to understand a person’s experience across stages, touchpoints, actions, thoughts, emotions, pain points, and opportunities.2627## Software and system structure2829- [Choose an architecture diagram](https://docs.diagram.zip/skills/choose-architecture-diagram/SKILL.md): Choose the smallest architecture view that answers the stakeholder's question, then route it to a suitable diagram source.30- [System landscape diagram](https://docs.diagram.zip/skills/system-landscape-diagram/SKILL.md): Show the systems and people across an organization or domain, emphasizing ownership and meaningful dependencies.31- [System context diagram](https://docs.diagram.zip/skills/system-context-diagram/SKILL.md): Explain one system in its environment by showing its users, external systems, and the relationships that matter.32- [Container diagram](https://docs.diagram.zip/skills/container-diagram/SKILL.md): Show the major deployable or runtime containers inside one software system and how they collaborate.33- [Component diagram](https://docs.diagram.zip/skills/component-diagram/SKILL.md): Create a component-level view of software structure, interfaces, and dependencies when the audience needs implementation boundaries rather than deployment topology.34- [Architecture dynamic diagram](https://docs.diagram.zip/skills/architecture-dynamic-diagram/SKILL.md): Explain an architecture scenario over time by showing participating components, messages, and state changes for one concrete use case.35- [Deployment diagram](https://docs.diagram.zip/skills/deployment-diagram/SKILL.md): Show where software artifacts run, which infrastructure nodes host them, and how runtime communication crosses environments or trust boundaries.36- [Block diagram](https://docs.diagram.zip/skills/block-diagram/SKILL.md): Arrange labeled blocks and relationships to communicate system decomposition, signal or data paths, and high-level structure without committing to a specialized formal notation.37- [Class diagram](https://docs.diagram.zip/skills/class-diagram/SKILL.md): Create or review class diagrams that explain types, responsibilities, contracts, and structural relationships in an object-oriented or domain model.38- [Entity-relationship diagram](https://docs.diagram.zip/skills/entity-relationship-diagram/SKILL.md): Model persistent data with entities, attributes, keys, relationships, cardinality, optionality, and integrity boundaries using an entity-relationship diagram.39- [Dependency graph](https://docs.diagram.zip/skills/dependency-graph/SKILL.md): Show dependencies between packages, modules, services, artifacts, or concepts when the important story is coupling, direction, reachability, or change impact.40- [Network topology](https://docs.diagram.zip/skills/network-topology/SKILL.md): Document physical or logical networks with nodes, interfaces, links, segments, addressing, trust zones, and traffic boundaries.4142## Conceptual and planning4344- [Mind map](https://docs.diagram.zip/skills/mind-map/SKILL.md): Use when the user needs to explore one central topic through associative branches, capture brainstorming, or organize an unconstrained idea space before choosing a structure.45- [Concept map](https://docs.diagram.zip/skills/concept-map/SKILL.md): Use when the user needs to explain concepts and the labeled relationships between them, especially definitions, dependencies, evidence, or cross-domain connections.46- [Hierarchy diagram](https://docs.diagram.zip/skills/hierarchy-diagram/SKILL.md): Use when the user needs a ranked, nested, or reporting structure such as a taxonomy, organization chart, tree, or work breakdown structure.47- [Decision tree](https://docs.diagram.zip/skills/decision-tree/SKILL.md): Use when the user needs to show a sequence of choices, branching rules, outcomes, or diagnostic paths.48- [Matrix diagram](https://docs.diagram.zip/skills/matrix-diagram/SKILL.md): Use when the user needs to compare two dimensions, expose a portfolio or prioritization space, or show a many-to-many relationship in a grid or quadrant.49- [Set diagram](https://docs.diagram.zip/skills/set-diagram/SKILL.md): Use when the user needs to show membership, overlap, exclusion, union, intersection, or nested categories with sets.5051## Data visualization5253- [Choose a data visualization](https://docs.diagram.zip/skills/choose-data-visualization/SKILL.md): Choose and design a data visualization when the user has data, a comparison, trend, distribution, relationship, flow, or geographic question but has not yet chosen a chart form. Use the simplest honest encoding, explain the story, and route the result to Vega or Vega-Lite when appropriate.5455## Technical and hardware5657- [Protocol layout diagram](https://docs.diagram.zip/skills/protocol-layout-diagram/SKILL.md): Use when a diagram must explain the bit, byte, or word layout of a protocol message, file header, register, or binary record.58- [Digital timing diagram](https://docs.diagram.zip/skills/digital-timing-diagram/SKILL.md): Use when a diagram must show digital signals changing over time, including clocked interfaces, bus transactions, handshakes, setup/hold relationships, or waveform protocols.59- [Rack diagram](https://docs.diagram.zip/skills/rack-diagram/SKILL.md): Use when documenting equipment placement in a cabinet or rack, including rack units, device identity, power, network uplinks, and physical capacity.60- [Wiring harness diagram](https://docs.diagram.zip/skills/wiring-harness-diagram/SKILL.md): Use when the user needs to document wires, cables, connectors, splices, branches, pin mappings, or harness manufacturing/service information.61- [HDL component diagram](https://docs.diagram.zip/skills/hdl-component-diagram/SKILL.md): Use when the user needs a hardware-design view of HDL entities, modules, interfaces, ports, parameters, clocks, resets, and hierarchy.62- [Circuit diagram](https://docs.diagram.zip/skills/circuit-diagram/SKILL.md): Use when the user needs an electrical or electronic schematic showing components, nets, reference designators, power, signal flow, and test points.63- [Technical illustration](https://docs.diagram.zip/skills/technical-illustration/SKILL.md): Use when the user needs an explanatory technical figure showing parts, assemblies, operation, dimensions, callouts, or a controlled visual sequence.6465## Renderer and source formats6667- [PlantUML syntax](https://docs.diagram.zip/create/types/plantuml/): Create a PlantUML diagram. [Style](https://docs.diagram.zip/style/types/plantuml/).68- [Mermaid syntax](https://docs.diagram.zip/create/types/mermaid/): Create a Mermaid diagram. [Style](https://docs.diagram.zip/style/types/mermaid/).69- [Graphviz syntax](https://docs.diagram.zip/create/types/graphviz/): Create a Graphviz diagram. [Style](https://docs.diagram.zip/style/types/graphviz/).70- [D2 syntax](https://docs.diagram.zip/create/types/d2/): Create a D2 diagram. [Style](https://docs.diagram.zip/style/types/d2/).71- [C4 PlantUML syntax](https://docs.diagram.zip/create/types/c4plantuml/): Create a C4 PlantUML diagram. [Style](https://docs.diagram.zip/style/types/c4plantuml/).72- [BlockDiag syntax](https://docs.diagram.zip/create/types/blockdiag/): Create a BlockDiag diagram. [Style](https://docs.diagram.zip/style/types/blockdiag/).73- [SeqDiag syntax](https://docs.diagram.zip/create/types/seqdiag/): Create a SeqDiag diagram. [Style](https://docs.diagram.zip/style/types/seqdiag/).74- [ActDiag syntax](https://docs.diagram.zip/create/types/actdiag/): Create an ActDiag diagram. [Style](https://docs.diagram.zip/style/types/actdiag/).75- [NwDiag syntax](https://docs.diagram.zip/create/types/nwdiag/): Create a NwDiag diagram. [Style](https://docs.diagram.zip/style/types/nwdiag/).76- [PacketDiag syntax](https://docs.diagram.zip/create/types/packetdiag/): Create a PacketDiag diagram. [Style](https://docs.diagram.zip/style/types/packetdiag/).77- [RackDiag syntax](https://docs.diagram.zip/create/types/rackdiag/): Create a RackDiag diagram. [Style](https://docs.diagram.zip/style/types/rackdiag/).78- [BPMN syntax](https://docs.diagram.zip/create/types/bpmn/): Create a BPMN diagram. [Style](https://docs.diagram.zip/style/types/bpmn/).79- [Bytefield syntax](https://docs.diagram.zip/create/types/bytefield/): Create a Bytefield diagram. [Style](https://docs.diagram.zip/style/types/bytefield/).80- [DBML syntax](https://docs.diagram.zip/create/types/dbml/): Create a DBML diagram. [Style](https://docs.diagram.zip/style/types/dbml/).81- [Diagrams.net syntax](https://docs.diagram.zip/create/types/diagramsnet/): Create a Diagrams.net diagram. [Style](https://docs.diagram.zip/style/types/diagramsnet/).82- [Ditaa syntax](https://docs.diagram.zip/create/types/ditaa/): Create a Ditaa diagram. [Style](https://docs.diagram.zip/style/types/ditaa/).83- [ERD syntax](https://docs.diagram.zip/create/types/erd/): Create an ERD diagram. [Style](https://docs.diagram.zip/style/types/erd/).84- [Excalidraw syntax](https://docs.diagram.zip/create/types/excalidraw/): Create an Excalidraw diagram. [Style](https://docs.diagram.zip/style/types/excalidraw/).85- [GoAT syntax](https://docs.diagram.zip/create/types/goat/): Create a GoAT diagram. [Style](https://docs.diagram.zip/style/types/goat/).86- [Nomnoml syntax](https://docs.diagram.zip/create/types/nomnoml/): Create a Nomnoml diagram. [Style](https://docs.diagram.zip/style/types/nomnoml/).87- [Pikchr syntax](https://docs.diagram.zip/create/types/pikchr/): Create a Pikchr diagram. [Style](https://docs.diagram.zip/style/types/pikchr/).88- [Squaring syntax](https://docs.diagram.zip/create/types/squaring/): Squaring stands for Squared rectangles and Smith diagrams. Create a Squaring diagram. [Style](https://docs.diagram.zip/style/types/squaring/). Origin: [Brooks, Smith, Stone, and Tutte at The dissection of rectangles into squares (Duke Mathematical Journal, 1940)](https://doi.org/10.1215/S0012-7094-40-00718-9).89- [Structurizr syntax](https://docs.diagram.zip/create/types/structurizr/): Create a Structurizr diagram. [Style](https://docs.diagram.zip/style/types/structurizr/).90- [Svgbob syntax](https://docs.diagram.zip/create/types/svgbob/): Create a Svgbob diagram. [Style](https://docs.diagram.zip/style/types/svgbob/).91- [Symbolator syntax](https://docs.diagram.zip/create/types/symbolator/): Create a Symbolator diagram. [Style](https://docs.diagram.zip/style/types/symbolator/).92- [TikZ syntax](https://docs.diagram.zip/create/types/tikz/): Create a TikZ diagram. [Style](https://docs.diagram.zip/style/types/tikz/).93- [TRN syntax](https://docs.diagram.zip/create/types/trn/): TRN stands for Tabular Recipe Notation. Create a TRN diagram. [Style](https://docs.diagram.zip/style/types/trn/). Origin: [Michael Chu at Cooking for Engineers](https://www.cookingforengineers.com/).94- [UMLet syntax](https://docs.diagram.zip/create/types/umlet/): Create an UMLet diagram. [Style](https://docs.diagram.zip/style/types/umlet/).95- [Vega syntax](https://docs.diagram.zip/create/types/vega/): Create a Vega diagram. [Style](https://docs.diagram.zip/style/types/vega/).96- [Vega-Lite syntax](https://docs.diagram.zip/create/types/vegalite/): Create a Vega-Lite diagram. [Style](https://docs.diagram.zip/style/types/vegalite/).97- [WaveDrom syntax](https://docs.diagram.zip/create/types/wavedrom/): Create a WaveDrom diagram. [Style](https://docs.diagram.zip/style/types/wavedrom/).98- [WireViz syntax](https://docs.diagram.zip/create/types/wireviz/): Create a WireViz diagram. [Style](https://docs.diagram.zip/style/types/wireviz/).99100## General pages101102- [Editor workspace](https://docs.diagram.zip/create/)103- [Editable SVG files and local drafts](https://docs.diagram.zip/create/): Reopen validated enriched SVG files without publishing.104- [Details JSON and presentation](https://docs.diagram.zip/style/presentation/)105- [SVG normalization and version contracts](https://docs.diagram.zip/style/svg-normalization/)106- [Share a diagram](https://docs.diagram.zip/collaboration/sharing/)107- [Password encryption](https://docs.diagram.zip/collaboration/encryption/)108- [Working state and published state](https://docs.diagram.zip/collaboration/working-and-saved-state/)109110## Structured catalogs111112- [diagram-skills.json](https://docs.diagram.zip/diagram-skills.json)113- [diagram-types.json](https://docs.diagram.zip/diagram-types.json)114- [Full documentation text](https://docs.diagram.zip/llms-full.txt)115- [Source repository](https://github.com/FelineStateMachine/diagramzip)