1const option = (name, values, description) => ({ name, values, description })23export const diagramTypes = [4 {5 id: 'plantuml',6 label: 'PlantUML',7 category: 'UML and architecture',8 format: 'PlantUML text',9 summary: 'PlantUML creates UML and related diagrams from directives and relationships.',10 use: 'Use PlantUML for sequence, class, activity, state, component, deployment, and use-case diagrams.',11 syntax: ['Start the source with `@startuml`.', 'End the source with `@enduml`.', 'Declare participants or elements before complex relationships.', 'Use arrows to define relationships or messages.'],12 language: 'text',13 example: ['@startuml', 'actor Alice', 'participant Service', 'Alice -> Service: Create a diagram', 'Service --> Alice: Return the link', '@enduml'],14 styleSummary: 'PlantUML supports themes, skin parameters, colors, sprites, and element-specific style rules.',15 sourceStyle: ['Use `!theme` to apply a bundled theme.', 'Use `skinparam` for global or diagram-specific values.', 'Add color values to elements when you need a local override.'],16 rendererOptions: [option('theme', 'A supported PlantUML theme name', 'Apply the theme before diagram.zip renders the source.'), option('no-metadata', 'Flag', 'Remove the source metadata from the rendered image.')],17 upstream: 'https://plantuml.com/',18 },19 {20 id: 'mermaid',21 label: 'Mermaid',22 category: 'General diagrams',23 format: 'Mermaid text',24 summary: 'Mermaid creates diagrams with compact, Markdown-friendly text.',25 use: 'Use Mermaid for flowcharts, sequence diagrams, class diagrams, state diagrams, timelines, and many other diagram forms.',26 syntax: ['Put the diagram keyword on the first line.', 'Declare nodes, participants, or data after the keyword.', 'Use the syntax for the selected Mermaid diagram form.', 'diagram.zip rejects frontmatter settings that reduce renderer security.'],27 language: 'text',28 example: ['flowchart LR', ' Idea[Idea] --> Agent[Agent]', ' Agent --> Diagram[Shared diagram]'],29 styleSummary: 'Mermaid supports themes, frontmatter configuration, class definitions, and diagram-specific configuration.',30 sourceStyle: ['Use `classDef` and `class` in flowcharts.', 'Use frontmatter for supported theme and layout values.', 'Use Mermaid theme variables for controlled color changes.'],31 rendererOptions: [option('layout', '`dagre` or `elk`; mind maps can also use `tidy-tree`', 'Select a layout engine.'), option('Mermaid configuration', 'Primitive values', 'Use kebab-case. Replace a configuration dot with an underscore.')],32 limitations: ['diagram.zip removes active content and unsafe external resources from the SVG.', 'Security configuration values cannot reduce the renderer security level.'],33 upstream: 'https://mermaid.js.org/intro/',34 },35 {36 id: 'graphviz',37 label: 'Graphviz',38 category: 'Graphs and networks',39 format: 'DOT text',40 summary: 'Graphviz creates directed and undirected graphs from the DOT language.',41 use: 'Use Graphviz when graph structure and automatic layout are more important than manual placement.',42 syntax: ['Use `digraph` for directed edges.', 'Use `graph` for undirected edges.', 'Use `->` for a directed edge.', 'Use `--` for an undirected edge.', 'Put attributes in square brackets.'],43 language: 'text',44 example: ['digraph delivery {', ' rankdir=LR', ' idea -> agent -> diagram', '}'],45 styleSummary: 'DOT supports graph, node, and edge attributes.',46 sourceStyle: ['Set graph defaults with a `graph` attribute statement.', 'Set node defaults with a `node` attribute statement.', 'Set edge defaults with an `edge` attribute statement.', 'Add an attribute list to override one element.'],47 rendererOptions: [option('layout', '`dot`, `neato`, `fdp`, `sfdp`, `twopi`, or `circo`', 'Select the layout program.'), option('graph-attribute-{name}', 'A DOT graph attribute value', 'Set one graph attribute.'), option('node-attribute-{name}', 'A DOT node attribute value', 'Set one default node attribute.'), option('edge-attribute-{name}', 'A DOT edge attribute value', 'Set one default edge attribute.'), option('scale', 'Number; default is `72.0`', 'Set the input scale for position data.')],48 upstream: 'https://graphviz.org/documentation/',49 },50 {51 id: 'd2',52 label: 'D2',53 category: 'General diagrams',54 format: 'D2 text',55 summary: 'D2 creates modern diagrams from declarations, connections, containers, and style properties.',56 use: 'Use D2 for architecture diagrams, dependency graphs, process diagrams, and annotated technical sketches.',57 syntax: ['Declare a shape with an identifier and an optional label.', 'Use an arrow to connect two shapes.', 'Put nested elements inside braces.', 'Put style properties below `style`.'],58 language: 'text',59 example: ['user: User', 'agent: Agent', 'diagram: "diagram.zip"', 'user -> agent: request', 'agent -> diagram: create'],60 styleSummary: 'D2 supports themes, shape properties, style blocks, classes, and sketch mode.',61 sourceStyle: ['Put local values in an element `style` block.', 'Define reusable classes when elements use the same style.', 'Use shape properties to control geometry and labels.'],62 rendererOptions: [option('theme', 'D2 theme name or number', 'Apply a D2 theme.'), option('layout', '`dagre` or `elk`', 'Select the layout engine.'), option('sketch', 'Flag', 'Apply the hand-drawn style.')],63 upstream: 'https://d2lang.com/tour/intro/',64 },65 {66 id: 'c4plantuml',67 label: 'C4 PlantUML',68 category: 'UML and architecture',69 format: 'PlantUML with C4 macros',70 summary: 'C4 PlantUML creates C4 software architecture diagrams with PlantUML macros.',71 use: 'Use C4 PlantUML for system landscape, system context, container, component, dynamic, and deployment views.',72 syntax: ['Start and end the source with PlantUML directives.', 'Include the required C4 library file.', 'Declare people, systems, containers, or components.', 'Use `Rel` macros to define relationships.'],73 language: 'text',74 example: ['@startuml', '!include <C4/C4_Context>', 'Person(user, "User")', 'System(app, "diagram.zip")', 'Rel(user, app, "Creates diagrams")', '@enduml'],75 styleSummary: 'C4 PlantUML supports layout macros, tags, legends, and PlantUML style controls.',76 sourceStyle: ['Use C4 layout macros to change direction or spacing.', 'Use tags and element-style macros for reusable styles.', 'Use PlantUML theme and skin parameters only when they do not conflict with C4 macros.'],77 rendererOptions: [option('theme', 'A supported PlantUML theme name', 'Apply the theme before diagram.zip renders the source.'), option('no-metadata', 'Flag', 'Remove the source metadata from the rendered image.')],78 upstream: 'https://github.com/plantuml-stdlib/C4-PlantUML',79 },80 {81 id: 'blockdiag',82 label: 'BlockDiag',83 category: 'Process and infrastructure',84 format: 'BlockDiag text',85 summary: 'BlockDiag creates block diagrams with automatic layout.',86 use: 'Use BlockDiag for systems, processes, and component relationships.',87 syntax: ['Put the diagram in a `blockdiag` block.', 'Separate statements with semicolons.', 'Use arrows to connect nodes.', 'Put node attributes in square brackets.'],88 language: 'text',89 example: ['blockdiag {', ' idea -> agent -> diagram;', ' agent [color = "#dbeafe"];', '}'],90 styleSummary: 'BlockDiag supports diagram attributes and per-node or per-edge attributes.',91 sourceStyle: ['Set orientation and default attributes in the diagram block.', 'Set colors, shapes, fonts, and sizes in node attributes.', 'Set line and label properties in edge attributes.'],92 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],93 upstream: 'http://blockdiag.com/en/blockdiag/',94 },95 {96 id: 'seqdiag',97 label: 'SeqDiag',98 category: 'Process and infrastructure',99 format: 'SeqDiag text',100 summary: 'SeqDiag creates sequence diagrams from message statements.',101 use: 'Use SeqDiag to show requests, responses, and ordered interactions.',102 syntax: ['Put the diagram in a `seqdiag` block.', 'Use arrows to send messages.', 'Use a left arrow for a response.', 'Put message attributes in square brackets.'],103 language: 'text',104 example: ['seqdiag {', ' user -> agent [label = "Create diagram"];', ' user <-- agent [label = "Return link"];', '}'],105 styleSummary: 'SeqDiag supports participant, message, and diagram attributes.',106 sourceStyle: ['Set participant colors and fonts in participant attributes.', 'Set message labels, colors, and line forms in message attributes.', 'Set diagram defaults in the diagram block.'],107 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],108 upstream: 'http://blockdiag.com/en/seqdiag/',109 },110 {111 id: 'actdiag',112 label: 'ActDiag',113 category: 'Process and infrastructure',114 format: 'ActDiag text',115 summary: 'ActDiag creates activity diagrams with actions and lanes.',116 use: 'Use ActDiag to show a process across people, systems, or teams.',117 syntax: ['Put the diagram in an `actdiag` block.', 'Use arrows to connect actions.', 'Put related actions in a `lane` block.', 'Put action attributes in square brackets.'],118 language: 'text',119 example: ['actdiag {', ' write -> review -> share', ' lane user {', ' write; share;', ' }', ' lane agent {', ' review;', ' }', '}'],120 styleSummary: 'ActDiag supports lane, action, edge, and diagram attributes.',121 sourceStyle: ['Set labels and colors on actions.', 'Set lane labels and colors in lane blocks.', 'Set edge labels and colors in edge attributes.'],122 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],123 upstream: 'http://blockdiag.com/en/actdiag/',124 },125 {126 id: 'nwdiag',127 label: 'NwDiag',128 category: 'Process and infrastructure',129 format: 'NwDiag text',130 summary: 'NwDiag creates network diagrams from networks, addresses, and hosts.',131 use: 'Use NwDiag to show network segments and the devices that connect to them.',132 syntax: ['Put the diagram in an `nwdiag` block.', 'Declare each network in a `network` block.', 'Declare hosts inside a network.', 'Use attributes for addresses and labels.'],133 language: 'text',134 example: ['nwdiag {', ' network public {', ' address = "192.0.2.0/24";', ' gateway [address = "192.0.2.1"];', ' }', '}'],135 styleSummary: 'NwDiag supports network and host attributes.',136 sourceStyle: ['Set a network label, color, and address in its block.', 'Set host shape, color, label, and address in host attributes.', 'Repeat a host in two networks to show a connection.'],137 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],138 upstream: 'http://blockdiag.com/en/nwdiag/',139 },140 {141 id: 'packetdiag',142 label: 'PacketDiag',143 category: 'Process and infrastructure',144 format: 'PacketDiag text',145 summary: 'PacketDiag creates bit-field layouts for packets and binary records.',146 use: 'Use PacketDiag to show field positions, field widths, and grouped data.',147 syntax: ['Put the diagram in a `packetdiag` block.', 'Set the column width when the default is not correct.', 'Use bit ranges before field labels.', 'Use attributes for field height or label rotation.'],148 language: 'text',149 example: ['packetdiag {', ' colwidth = 16;', ' 0-3: Version;', ' 4-7: Flags;', ' 8-15: Length;', '}'],150 styleSummary: 'PacketDiag supports global layout values and field attributes.',151 sourceStyle: ['Set column width and node height at the start of the block.', 'Set field color, height, and label rotation in field attributes.'],152 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],153 upstream: 'http://blockdiag.com/en/nwdiag/packetdiag-examples.html',154 },155 {156 id: 'rackdiag',157 label: 'RackDiag',158 category: 'Process and infrastructure',159 format: 'RackDiag text',160 summary: 'RackDiag creates equipment-rack diagrams from rack-unit positions.',161 use: 'Use RackDiag to document servers, switches, power units, and unused rack space.',162 syntax: ['Put the diagram in a `rackdiag` block.', 'Declare the total rack height in rack units.', 'Put the start position before each device.', 'Put the device height in square brackets.'],163 language: 'text',164 example: ['rackdiag {', ' 8U;', ' 1: UPS [2U];', ' 3: Server [2U];', ' 5: Switch;', '}'],165 styleSummary: 'RackDiag supports rack and device attributes.',166 sourceStyle: ['Set device labels, colors, and heights in device attributes.', 'Use rack-unit positions to control vertical placement.'],167 rendererOptions: [option('antialias', 'Flag', 'Apply the anti-alias filter.'), option('size', '`widthxheight`', 'Set the image size.'), option('no-doctype', 'Flag', 'Remove the document type declaration from SVG output.')],168 upstream: 'http://blockdiag.com/en/nwdiag/rackdiag-examples.html',169 },170 {171 id: 'bpmn',172 label: 'BPMN',173 category: 'Process and infrastructure',174 format: 'BPMN 2.0 XML',175 summary: 'BPMN renders a BPMN 2.0 process definition from XML.',176 use: 'Use BPMN for formal business processes, decisions, events, tasks, and message flows.',177 syntax: ['Use a BPMN `definitions` root element.', 'Put process elements in a `process` element.', 'Give each referenced element a unique ID.', 'Include diagram interchange data when the XML must define positions.'],178 language: 'xml',179 exampleComplete: false,180 example: ['<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL">', ' <bpmn:process id="Process_1">', ' <bpmn:startEvent id="Start" />', ' <bpmn:task id="Create" name="Create diagram" />', ' <bpmn:endEvent id="End" />', ' </bpmn:process>', '</bpmn:definitions>'],181 styleSummary: 'BPMN appearance usually comes from BPMN diagram interchange data and renderer defaults.',182 sourceStyle: ['Use BPMN diagram interchange bounds to set element positions.', 'Use BPMN diagram interchange waypoints to set connector paths.', 'Use supported extension attributes only when another BPMN tool must preserve them.'],183 rendererOptions: [],184 upstream: 'https://www.omg.org/spec/BPMN/2.0/',185 },186 {187 id: 'bytefield',188 label: 'Bytefield',189 category: 'Data and hardware',190 format: 'bytefield-svg forms',191 summary: 'Bytefield creates byte-oriented protocol diagrams from drawing forms.',192 use: 'Use Bytefield for byte layouts, headers, payloads, and protocol documentation.',193 syntax: ['Put one drawing form on each line.', 'Use `draw-box` to add a field.', 'Use a property map to set a span.', 'Use gap and bottom forms to complete the layout.'],194 language: 'clojure',195 example: ['(draw-column-headers)', '(draw-box "Type" {:span 2})', '(draw-box "Length" {:span 2})', '(draw-gap "Payload")', '(draw-bottom)'],196 styleSummary: 'Bytefield uses drawing-form properties for spans, labels, and layout.',197 sourceStyle: ['Use property maps on drawing forms.', 'Use custom drawing forms only when the renderer supports them.', 'Keep labels short when a field has a small span.'],198 rendererOptions: [],199 limitations: ['diagram.zip returns SVG for this type.'],200 upstream: 'https://bytefield-svg.deepsymmetry.org/',201 },202 {203 id: 'dbml',204 label: 'DBML',205 category: 'Data and hardware',206 format: 'Database Markup Language',207 summary: 'DBML creates database schemas from tables, fields, enums, indexes, and references.',208 use: 'Use DBML to document relational data models with a concise schema language.',209 syntax: ['Declare a table with a `Table` block.', 'Declare one field on each line.', 'Put field settings in square brackets.', 'Use `Ref` to define a relationship.'],210 language: 'sql',211 example: ['Table users {', ' id integer [primary key]', ' name varchar', '}', '', 'Table diagrams {', ' id integer [primary key]', ' user_id integer', '}', '', 'Ref: diagrams.user_id > users.id'],212 styleSummary: 'DBML describes schema structure. It does not define visual presentation.',213 sourceStyle: ['Use notes and labels to improve the rendered meaning.', 'Use table groups to express related tables when the syntax version supports them.', 'Use general presentation settings for the outer canvas.'],214 rendererOptions: [],215 upstream: 'https://dbml.dbdiagram.io/docs/',216 },217 {218 id: 'diagramsnet',219 label: 'Diagrams.net',220 category: 'General diagrams',221 format: 'diagrams.net XML',222 summary: 'Diagrams.net renders a diagram from its native XML document.',223 use: 'Use this type when diagrams.net is the source editor for the diagram.',224 syntax: ['Use an `mxfile` document.', 'Put each page in a `diagram` element.', 'Store cells in an `mxGraphModel` structure.', 'Keep element IDs unique inside the document.'],225 language: 'xml',226 exampleComplete: false,227 example: ['<mxfile>', ' <diagram name="Page-1">', ' <mxGraphModel>', ' <root>', ' <mxCell id="0" />', ' <mxCell id="1" parent="0" />', ' </root>', ' </mxGraphModel>', ' </diagram>', '</mxfile>'],228 styleSummary: 'Diagrams.net stores geometry and style values on cells in the XML source.',229 sourceStyle: ['Use the diagrams.net editor to change cell styles safely.', 'The `style` attribute contains semicolon-separated cell settings.', 'The geometry element contains the position and size.'],230 rendererOptions: [],231 upstream: 'https://www.diagrams.net/doc/faq/diagram-source-edit',232 },233 {234 id: 'ditaa',235 label: 'Ditaa',236 category: 'Text sketches',237 format: 'ASCII diagram text',238 summary: 'Ditaa converts an ASCII-art drawing into a clean diagram.',239 use: 'Use Ditaa when the source must remain readable as plain text.',240 syntax: ['Use ASCII lines to draw boxes and connectors.', 'Put text inside a closed shape.', 'Use arrowheads to set connector direction.', 'Use Ditaa tags to set shape and color behavior.'],241 language: 'text',242 example: ['+--------+ +-------------+', '| User |------>| diagram.zip |', '+--------+ +-------------+'],243 styleSummary: 'Ditaa supports shape tags, color tags, dashed lines, and renderer options.',244 sourceStyle: ['Add a six-character color tag such as `{cBLU}` inside a shape.', 'Use shape tags such as `{d}` for a document.', 'Use the Ditaa line characters to control corners and connectors.'],245 rendererOptions: [option('no-antialias', 'Flag', 'Turn off anti-aliasing.'), option('no-separation', 'Flag', 'Do not separate common shape edges.'), option('round-corners', 'Flag', 'Use round corners.'), option('scale', 'Number; default is `1.0`', 'Scale the diagram.'), option('no-shadows', 'Flag', 'Turn off shadows.'), option('tabs', 'Number', 'Set the tab width.'), option('background', 'Six hexadecimal digits, for example `FFFFFF`', 'Set the image background.'), option('transparent', 'Flag', 'Use a transparent background.')],246 upstream: 'https://github.com/stathissideris/ditaa',247 },248 {249 id: 'erd',250 label: 'ERD',251 category: 'Data and hardware',252 format: 'ERD text',253 summary: 'ERD creates entity-relationship diagrams from entities, attributes, and cardinalities.',254 use: 'Use ERD for compact relational models and domain data models.',255 syntax: ['Put an entity name in square brackets.', 'Put each attribute below its entity.', 'Use `*` for a key attribute.', 'Use a relationship line with cardinality markers.'],256 language: 'text',257 example: ['[User]', '*id', 'name', '', '[Diagram]', '*id', '+user_id', '', '[User] 1--* [Diagram]'],258 styleSummary: 'ERD focuses on the data model. The renderer controls most visual values.',259 sourceStyle: ['Use clear entity and attribute names.', 'Use key and relationship markers consistently.', 'Use general presentation settings for the outer canvas.'],260 rendererOptions: [],261 upstream: 'https://github.com/BurntSushi/erd',262 },263 {264 id: 'excalidraw',265 label: 'Excalidraw',266 category: 'General diagrams',267 format: 'Excalidraw JSON',268 summary: 'Excalidraw renders a hand-drawn diagram from an Excalidraw JSON document.',269 use: 'Use this type when Excalidraw is the source editor for the diagram.',270 syntax: ['Use an Excalidraw JSON object.', 'Put drawable objects in the `elements` array.', 'Put document settings in the `appState` object.', 'Keep element IDs unique.'],271 language: 'json',272 exampleComplete: false,273 example: ['{', ' "type": "excalidraw",', ' "version": 2,', ' "elements": [],', ' "appState": {', ' "viewBackgroundColor": "#ffffff"', ' }', '}'],274 styleSummary: 'Excalidraw stores the style of each element in the JSON source.',275 sourceStyle: ['Use the Excalidraw editor to change element styles safely.', 'Element values include stroke, fill, roughness, opacity, and font properties.', 'The application state can define the source canvas color.'],276 rendererOptions: [],277 upstream: 'https://docs.excalidraw.com/docs/codebase/json-schema/',278 },279 {280 id: 'goat',281 label: 'GoAT',282 category: 'Text sketches',283 format: 'ASCII diagram text',284 summary: 'GoAT converts ASCII-art diagrams into SVG.',285 use: 'Use GoAT for boxes, arrows, grids, and compact diagrams that remain useful as text.',286 syntax: ['Use ASCII or supported Unicode line characters.', 'Close shapes when you need filled regions.', 'Add arrowheads at the end of a connector.', 'Keep labels away from connector intersections.'],287 language: 'text',288 showCompleteExample: true,289 example: ['+------+ +---------+', '| User |------>| Diagram |', '+------+ +---------+'],290 styleSummary: 'GoAT takes most geometry from the text. Renderer options control SVG colors and character handling.',291 sourceStyle: ['Change the text geometry to change placement.', 'Use supported line and corner characters for the required shape.', 'Use labels inside or near the related shape.'],292 rendererOptions: [option('svg-color-dark-scheme', 'CSS color; default is `#FFF`', 'Set the foreground color for a dark color scheme.'), option('svg-color-light-scheme', 'CSS color; default is `#000`', 'Set the foreground color for a light color scheme.'), option('utf8', 'Flag', 'Treat Unicode box characters as the drawing characters.')],293 upstream: 'https://github.com/blampe/goat',294 },295 {296 id: 'nomnoml',297 label: 'Nomnoml',298 category: 'UML and architecture',299 format: 'Nomnoml text',300 summary: 'Nomnoml creates UML-style diagrams from bracketed classifiers and relationships.',301 use: 'Use Nomnoml for fast class, component, and relationship sketches.',302 syntax: ['Put each classifier in square brackets.', 'Separate name, attributes, and methods with a vertical bar.', 'Connect classifiers with a relationship operator.', 'Put directives at the start of the source.'],303 language: 'text',304 example: ['#direction: right', '[User]->[Diagram]', '[Diagram|title: string|save(); share()]'],305 styleSummary: 'Nomnoml uses hash directives and custom classifier styles.',306 sourceStyle: ['Use directives such as `#direction`, `#font`, and `#spacing`.', 'Define a custom classifier style with `#.name`.', 'Apply a classifier style with an angle-bracket type name.'],307 rendererOptions: [],308 limitations: ['diagram.zip returns SVG for this type.'],309 upstream: 'https://nomnoml.com/',310 },311 {312 id: 'pikchr',313 label: 'Pikchr',314 category: 'General diagrams',315 format: 'Pikchr text',316 summary: 'Pikchr creates precise technical drawings from relative placement commands.',317 use: 'Use Pikchr when you need controlled geometry and readable text source.',318 syntax: ['Create objects with commands such as `box`, `circle`, and `arrow`.', 'Use directions and anchor names for relative placement.', 'Assign a name when another command must reference an object.', 'Put text in quoted strings.'],319 language: 'text',320 example: ['box "User"', 'arrow right 0.6', 'box "diagram.zip"'],321 styleSummary: 'Pikchr supports dimensions, colors, fills, line widths, and placement controls in the source.',322 sourceStyle: ['Add `fill` and `color` values to an object.', 'Set global dimensions before the related objects.', 'Use object anchors for stable relative placement.'],323 rendererOptions: [],324 upstream: 'https://pikchr.org/home/doc/trunk/doc/userman.md',325 },326 {327 id: 'squaring',328 label: 'Squaring',329 fullName: 'Squared rectangles and Smith diagrams',330 category: 'Graphs and networks',331 format: 'Squaring text',332 summary: 'Squaring draws a squared rectangle, which is a rectangle tiled by squares, next to its Smith diagram. In that circuit every horizontal segment is a node and every square is a unit resistor whose current equals its side.',333 use: 'Use Squaring to explore squared rectangles and squared squares, or to check whether a dissection is simple and perfect. Sketch one with unknown sides and let the solver close it. Or build one backwards from a planar network by choosing or searching the battery edge.',334 syntax: ['Optionally begin with `.view rectangle`, `.view circuit`, `.view overlay`, or `.view both`; the default is `both`.', 'Add `.labels none` to hide side lengths, voltages, and currents.', 'Add `title` followed by text to name the diagram.', 'For a known dissection, write `rectangle <width> x <height>` and then the square sides in Bouwkamp order; parentheses and commas are ignored.', 'Bouwkamp order places each square at the leftmost point of the highest unfilled segment. Squares that share a top edge are listed left to right.', 'Write `rectangle ? x ?` to infer the size; the first group is then the top row.', 'A `?` side is a square as wide as the gap it lands in. Squares that do not fit stop placement, and the rest of the rectangle is hatched.', 'For a sketch, name sides with letters or expressions such as `a`, `2a`, or `a+b`. Every later group needs an `under` clause such as `(g h) under f c`, listing the squares it rests on from left to right.', 'The sketch solver scales the unique solution to whole numbers, or reports free lengths, contradictions, or a fractional side.', 'For a network, write `battery <positive> <negative>` and then wires as `wire a b`, chains such as `a - b - c`, `face a b c d` polygons, or `polyhedron cube`.', 'Write `battery any` to try every wire as the battery; the best result is drawn and every candidate is listed.', 'The battery replaces one edge of the graph, so do not list that edge as a wire. A wire parallel to the battery becomes a full-height square.', 'Every wire has resistance one; the renderer solves Kirchhoff and Ohm exactly, scales the voltages so all sides are whole numbers, and arranges the squares.', 'The network form needs a planar network in which the battery closes a face; polyhedral (3-connected planar) networks give a simple squaring.', 'Symmetric solids often fail for every battery because mirror-image nodes settle at the same voltage; asymmetric polyhedra work best.', 'The caption reports the order, size, whether the squaring is simple (no smaller rectangle of squares) and perfect (no repeated side), and the battery.', 'Compound blocks are outlined; node color runs from blue at the negative pole to red at the positive pole.', 'Start comments with `#`.'],335 language: 'text',336 example: ['.view both', 'title Order 9 simple perfect squared rectangle', '', 'rectangle 33 x 32', 'squares (18 15) (7 8) (14 4) (10 1) (9)'],337 styleSummary: 'Squaring colors each square and node by voltage from blue to red and scales wire thickness by current. Light and dark appearances use their own square, node, and wire palettes, and compound blocks are outlined with a dashed line.',338 sourceStyle: ['Use `.view rectangle` for the dissection alone and `.view circuit` for the Smith diagram alone.', 'Incomplete dissections always render as the rectangle view with hatched gaps.', 'Use `.view overlay` to draw the circuit on top of the squares, which shows how each segment collapses into a node.', 'Use `.labels none` for large dissections where numbers would not fit.', 'Choose a different battery wire in a network to obtain a different squaring from the same graph.', 'Reorder the square list, not the geometry, to change a Bouwkamp dissection.'],339 rendererOptions: [],340 limitations: ['Networks are arranged by search, so very large or non-planar networks are rejected instead of drawn.', 'A wire whose two nodes settle at the same voltage carries no current and is rejected; choose another battery or use `battery any`.', '`battery any` is limited to networks with at most 60 wires.', 'Node positions in the Smith diagram follow the midpoints of the horizontal segments rather than a spring layout.'],341 origin: {342 creator: 'Brooks, Smith, Stone, and Tutte',343 site: 'The dissection of rectangles into squares (Duke Mathematical Journal, 1940)',344 siteUrl: 'https://doi.org/10.1215/S0012-7094-40-00718-9',345 note: 'Diagram.zip implements a text notation and SVG renderer for the squared-rectangle and Smith-diagram correspondence that the four Trinity students discovered.',346 },347 upstream: 'https://www.squaring.net/',348 },349 {350 id: 'structurizr',351 label: 'Structurizr',352 category: 'UML and architecture',353 format: 'Structurizr DSL',354 summary: 'Structurizr creates C4 architecture views from a workspace model.',355 use: 'Use Structurizr when one model must produce multiple software architecture views.',356 syntax: ['Put the model and views in a `workspace` block.', 'Declare people, systems, containers, and components in the model.', 'Declare relationships in the model.', 'Select elements and layout rules in each view.'],357 language: 'text',358 example: ['workspace {', ' model {', ' user = person "User"', ' app = softwareSystem "diagram.zip"', ' user -> app "Creates diagrams"', ' }', ' views {', ' systemLandscape { include *; autolayout lr }', ' }', '}'],359 styleSummary: 'Structurizr supports workspace styles, themes, tags, and automatic layout.',360 sourceStyle: ['Add tags to model elements and relationships.', 'Define tag styles in the view configuration.', 'Use a theme when the source is trusted and the theme is available.', 'Use `autolayout` to set layout direction.'],361 rendererOptions: [option('view-key', 'A view key', 'Render one view from a workspace that contains multiple views.'), option('output', '`diagram` or `legend`', 'Render the selected view or its legend.')],362 upstream: 'https://docs.structurizr.com/dsl',363 },364 {365 id: 'svgbob',366 label: 'Svgbob',367 category: 'Text sketches',368 format: 'ASCII diagram text',369 summary: 'Svgbob converts ASCII-art diagrams into SVG.',370 use: 'Use Svgbob for boxes, arrows, circuits, and diagrams that must remain readable as text.',371 syntax: ['Use ASCII or supported Unicode drawing characters.', 'Close shapes when you need filled regions.', 'Put arrowheads at connector ends.', 'Put labels where they do not touch a line.'],372 language: 'text',373 example: ['+------+ +---------+', '| User |------>| Diagram |', '+------+ +---------+'],374 styleSummary: 'Svgbob takes geometry from the text and supports renderer-level SVG settings.',375 sourceStyle: ['Change the source spacing to change object placement.', 'Use supported characters to select line and corner forms.', 'Use renderer options for uniform color and font changes.'],376 rendererOptions: [option('background', 'CSS color; default is `white`', 'Set the SVG background.'), option('font-family', 'Font family; default is `arial`', 'Set the label font.'), option('font-size', 'Integer; default is `14`', 'Set the label font size.'), option('fill-color', 'CSS color; default is `black`', 'Set the solid-shape fill.'), option('scale', 'Number; default is `1`', 'Scale the SVG.'), option('stroke-width', 'Number; default is `2`', 'Set the line width.')],377 upstream: 'https://ivanceras.github.io/svgbob-editor/',378 },379 {380 id: 'symbolator',381 label: 'Symbolator',382 category: 'Data and hardware',383 format: 'VHDL or Verilog source',384 summary: 'Symbolator creates a component symbol from a hardware module declaration.',385 use: 'Use Symbolator to document component ports, directions, groups, and data widths.',386 syntax: ['Declare a VHDL entity or a Verilog module.', 'Declare the ports that must appear in the symbol.', 'Use supported comments to group ports.', 'Select the component when the source has more than one.'],387 language: 'text',388 example: ['module diagram (', ' input wire clock,', ' input wire data_in,', ' output wire data_out', ');', 'endmodule'],389 styleSummary: 'Symbolator gets structure from hardware source. Renderer options control the title, scale, and output details.',390 sourceStyle: ['Use supported port-group comments to organize the symbol.', 'Use clear port and parameter names.', 'Use renderer options for the title and scale.'],391 rendererOptions: [option('component', 'Component name', 'Select the component to render.'), option('transparent', 'Flag', 'Use a transparent background.'), option('title', 'Text', 'Add a title.'), option('scale', 'Number; default is `1.0`', 'Scale the diagram.'), option('no-type', 'Flag', 'Remove port type data.'), option('library-name', 'Text', 'Add a library name when the title is present.')],392 upstream: 'https://github.com/kevinpt/symbolator',393 },394 {395 id: 'tikz',396 label: 'TikZ',397 category: 'General diagrams',398 format: 'TeX with TikZ',399 summary: 'TikZ creates precise diagrams with TeX drawing commands.',400 use: 'Use TikZ for mathematical, scientific, geometric, and publication-quality diagrams.',401 syntax: ['Put drawing commands in a `tikzpicture` environment.', 'Create shapes with commands such as `node`, `draw`, and `path`.', 'Put options in square brackets.', 'Terminate each path command with a semicolon.'],402 language: 'latex',403 example: ['\\begin{tikzpicture}', ' \\node (user) at (0,0) {User};', ' \\node (diagram) at (3,0) {diagram.zip};', ' \\draw[->] (user) -- (diagram);', '\\end{tikzpicture}'],404 styleSummary: 'TikZ supports colors, line forms, fills, node styles, scopes, and reusable style definitions.',405 sourceStyle: ['Put local drawing options in square brackets.', 'Define reusable styles with `tikzset`.', 'Use scopes to apply a style to a group.', 'Load only the libraries that the diagram needs.'],406 rendererOptions: [],407 upstream: 'https://ctan.org/pkg/pgf',408 },409 {410 id: 'trn',411 label: 'TRN',412 fullName: 'Tabular Recipe Notation',413 category: 'Processes and recipes',414 format: 'Tabular Recipe Notation text',415 summary: 'TRN stands for Tabular Recipe Notation. It shows how ingredients and intermediate outcomes combine into one or more final results.',416 use: 'Use TRN for recipes, crafting trees, assembly instructions, and other nested transformations.',417 syntax: ['Optionally begin with `.layout combined` or `.layout individual`; the default is `combined`.', 'Declare each leaf value with `ingredient`.', 'Declare a meaningful final or reusable result with an `outcome` block.', 'Keep incidental conversions, such as ore to bars, as steps inside the outcome that consumes them.', 'Add a full-width preparation row with `instruction`.', 'Long instruction rows wrap and grow vertically to preserve their complete text.', 'Add a quoted display label after an identifier when needed.', 'Each `+` queues an input for the next `->`; place it immediately before the operation that consumes it.', 'Columns represent dependency depth. Independent operations on disjoint inputs can share a column.', 'Consecutive `->` lines without a new input extend the same branch from left to right.', 'Write one complete instruction in each `->` step.', 'Combined layout places prerequisite outcomes before direct ingredients in stable FIFO order.', 'Add `portion` after an outcome label or identifier when the result has a useful quantity.', 'Use `{portion}` in an action to embed that outcome quantity.', 'Start comments with `#`; OCR importers should record uncertain text in comments instead of guessing.'],418 authoringContract: ['Treat TRN source as the only public geometry control surface.', 'Select combined or individual geometry with the `.layout` directive.', 'Presentation appearance changes palette and canvas treatment. It does not change TRN layout, orientation, wrapping, or packing.', 'Edit the TRN source and request a new render.', 'Do not edit generated SVG, CSS classes, data attributes, viewBox values, or renderer implementation files.', 'If the source format cannot express requested geometry, report the limitation instead of patching renderer output.'],419 language: 'text',420 example: [421 '.layout combined',422 '',423 'ingredient flour "Bread flour"',424 'ingredient water',425 'ingredient yeast',426 'ingredient salt',427 '',428 'outcome bread portion 1 loaf {',429 ' + flour 500 g',430 ' + water 350 ml',431 ' + yeast 7 g',432 ' + salt 10 g',433 ' -> mix',434 ' -> knead',435 ' -> proof for 1 hour',436 ' -> bake {portion} at 230°C for 30 minutes',437 '}',438 ],439 styleSummary: 'TRN colors complete relationship zones as branches. Adjacent zones receive different normalized colors, while ingredients run downward and operations run right.',440 sourceStyle: ['Use `.layout combined` for one merged table.', 'Use `.layout individual` for dependency-positioned recipe tables.', 'Combined layout places prerequisite outcomes before direct ingredients and preserves source order within each FIFO group.', 'Place each `+` immediately before the operation that consumes it.', 'Independent branches can reuse a visual column when their inputs do not depend on each other.', 'Order consecutive `->` lines as operations should proceed from left to right.', 'Use outcomes for meaningful reusable or final results; keep incidental conversions inside the consuming outcome.', 'Use concise, complete instructions because combined and individual operation text is vertical.', 'Full-width `instruction` rows wrap automatically; combined and individual operation labels remain single-line.'],441 rendererOptions: [],442 limitations: ['The source selects one layout; the SVG does not embed an interactive layout toggle.', 'Combined and individual operation labels do not wrap. Long operation text can overflow.', 'TRN does not expose a source control for custom column packing.'],443 origin: {444 creator: 'Michael Chu',445 site: 'Cooking for Engineers',446 siteUrl: 'https://www.cookingforengineers.com/',447 note: 'Diagram.zip implements a text DSL and SVG renderer for Chu’s tabular recipe concept.',448 },449 upstream: 'https://www.cookingforengineers.com/2004/08/recipe-summaries-standards-and.html',450 },451 {452 id: 'umlet',453 label: 'UMLet',454 category: 'UML and architecture',455 format: 'UMLet UXF XML',456 summary: 'UMLet renders UML elements from a UXF XML document.',457 use: 'Use UMLet when UMLet is the source editor for the diagram.',458 syntax: ['Use a `diagram` root element.', 'Put each diagram item in a `element` block.', 'Use `coordinates` to set position and size.', 'Use `panel_attributes` for labels and element settings.'],459 language: 'xml',460 exampleComplete: false,461 example: ['<diagram program="umlet">', ' <element>', ' <id>UMLClass</id>', ' <coordinates><x>20</x><y>20</y><w>160</w><h>80</h></coordinates>', ' <panel_attributes>User</panel_attributes>', ' </element>', '</diagram>'],462 styleSummary: 'UMLet stores position and style commands in the UXF XML source.',463 sourceStyle: ['Use the UMLet editor to change element geometry safely.', 'Put supported style commands in `panel_attributes`.', 'Use `additional_attributes` only for the selected UMLet element.'],464 rendererOptions: [],465 upstream: 'https://www.umlet.com/',466 },467 {468 id: 'vega',469 label: 'Vega',470 category: 'Data and hardware',471 format: 'Vega JSON',472 summary: 'Vega creates data visualizations from a declarative JSON specification.',473 use: 'Use Vega when you need detailed control of data, scales, signals, marks, and interactions.',474 syntax: ['Use a JSON object with a Vega schema URL.', 'Put inline records in a data source.', 'Define scales and axes before marks use them.', 'Use mark encodings to map data to visual properties.'],475 language: 'json',476 example: ['{', ' "$schema": "https://vega.github.io/schema/vega/v6.json",', ' "width": 320,', ' "height": 180,', ' "padding": 5,', ' "data": [{', ' "name": "steps",', ' "values": [', ' {"step": "Create", "count": 8},', ' {"step": "Review", "count": 5},', ' {"step": "Share", "count": 7}', ' ]', ' }],', ' "scales": [', ' {"name": "x", "type": "band", "domain": {"data": "steps", "field": "step"}, "range": "width", "padding": 0.2},', ' {"name": "y", "type": "linear", "domain": {"data": "steps", "field": "count"}, "nice": true, "zero": true, "range": "height"}', ' ],', ' "axes": [', ' {"orient": "bottom", "scale": "x"},', ' {"orient": "left", "scale": "y"}', ' ],', ' "marks": [{', ' "type": "rect",', ' "from": {"data": "steps"},', ' "encode": {"enter": {', ' "x": {"scale": "x", "field": "step"},', ' "width": {"scale": "x", "band": 1},', ' "y": {"scale": "y", "field": "count"},', ' "y2": {"scale": "y", "value": 0},', ' "fill": {"value": "#7c3aed"}', ' }}', ' }]', '}'],477 styleSummary: 'Vega controls presentation through scales, mark encodings, axes, legends, and configuration.',478 sourceStyle: ['Set colors and sizes in mark encodings.', 'Use scales when a visual value depends on data.', 'Use the configuration object for common defaults.', 'Keep all data and images inline.'],479 rendererOptions: [],480 limitations: ['URL-backed data and images are not available.', 'diagram.zip returns SVG for this type.'],481 upstream: 'https://vega.github.io/vega/docs/',482 },483 {484 id: 'vegalite',485 label: 'Vega-Lite',486 category: 'Data and hardware',487 format: 'Vega-Lite JSON',488 summary: 'Vega-Lite creates data visualizations from concise mark and encoding declarations.',489 use: 'Use Vega-Lite for common charts that do not need the full Vega grammar.',490 syntax: ['Use a JSON object with a Vega-Lite schema URL.', 'Put inline records in `data.values`.', 'Select a mark type.', 'Map fields to channels in the `encoding` object.'],491 language: 'json',492 example: ['{', ' "$schema": "https://vega.github.io/schema/vega-lite/v6.json",', ' "data": {"values": [{"name": "A", "value": 4}]},', ' "mark": "bar",', ' "encoding": {', ' "x": {"field": "name", "type": "nominal"},', ' "y": {"field": "value", "type": "quantitative"}', ' }', '}'],493 styleSummary: 'Vega-Lite controls presentation through marks, encodings, scales, axes, legends, and configuration.',494 sourceStyle: ['Set mark properties for one mark.', 'Set channel scale and axis properties in the encoding.', 'Use the configuration object for common defaults.', 'Keep all data and images inline.'],495 rendererOptions: [],496 limitations: ['URL-backed data and images are not available.', 'diagram.zip returns SVG for this type.'],497 upstream: 'https://vega.github.io/vega-lite/docs/',498 },499 {500 id: 'wavedrom',501 label: 'WaveDrom',502 category: 'Data and hardware',503 format: 'WaveJSON',504 summary: 'WaveDrom creates digital timing diagrams from signal and wave data.',505 use: 'Use WaveDrom for clocks, buses, requests, responses, and protocol timing.',506 syntax: ['Use an object with a `signal` array.', 'Give each signal a name and a wave string.', 'Use data labels for bus values.', 'Use empty objects to add visual space.'],507 language: 'json',508 example: ['{ "signal": [', ' { "name": "clock", "wave": "p...." },', ' { "name": "data", "wave": "x.34x", "data": ["A", "B"] }', ']}'],509 styleSummary: 'WaveDrom supports source configuration, signal attributes, and a limited set of bundled skins.',510 sourceStyle: ['Use the `config` object for scale and header settings.', 'Use signal attributes for labels and wave data.', 'Select only a skin that diagram.zip provides.'],511 rendererOptions: [],512 limitations: ['Only the six bundled diagram.zip skins are available.', 'diagram.zip returns SVG for this type.'],513 upstream: 'https://wavedrom.com/tutorial.html',514 },515 {516 id: 'wireviz',517 label: 'WireViz',518 category: 'Data and hardware',519 format: 'WireViz YAML',520 summary: 'WireViz creates wiring-harness diagrams from connectors, cables, and connections.',521 use: 'Use WireViz to document cable assemblies, pins, wire colors, gauges, and connector mappings.',522 syntax: ['Declare connectors in the `connectors` map.', 'Declare cables in the `cables` map.', 'Put wiring paths in the `connections` list.', 'Use matching pin and wire lists for grouped connections.'],523 language: 'yaml',524 example: ['connectors:', ' X1:', ' type: Molex', ' pinlabels: [GND, DATA]', 'cables:', ' W1:', ' wirecount: 2', ' colors: [BK, RD]', 'connections:', ' - - X1: [1, 2]', ' - W1: [1, 2]'],525 styleSummary: 'WireViz uses YAML properties for connector, cable, wire, and output styles.',526 sourceStyle: ['Set connector and cable colors in their YAML definitions.', 'Use pin labels and wire colors to improve identification.', 'Use WireViz metadata and output settings only when the renderer supports them.'],527 rendererOptions: [],528 upstream: 'https://github.com/wireviz/WireViz',529 },530]531532export const diagramTypeIds = diagramTypes.map(({ id }) => id)