# Diagram types URL: https://tuios.dev/docs/libraries/sketch/diagram-types > Every diagram type sketch draws, as a picture, as text and as Mermaid source. sketch draws 33 diagram types: every type that pele draws. This page shows 32 of them. It leaves out `info`, which only shows the version of pele. Each diagram has three tabs: - **Picture** is the SVG from `sketch.Render`, drawn by `sketch/raster` in the theme of this site. - **Text** is the drawing from `sketch/text`, as `tuios mermaid --format text` prints it in an 80-column terminal. It is real text: you can select it and copy it. - **Source** is the Mermaid source of both. The tabs on this page work together. Select **Text** on one diagram, and every diagram shows its text drawing. The page keeps your choice. The pictures, the text drawings and the sources come from the same build of sketch. A script makes them again when sketch changes. Nobody draws them by hand. ## Read a text drawing - Lines and arrows are grey, boxes are cyan, and notes are yellow. Titles are bold. The data series of a chart take blue, yellow, green, red, cyan and magenta. - A terminal shows these 16 ANSI colours in its own palette. This page shows them in the palette of the site. - A drawing wider than 80 columns says so under it. Scroll a drawing sideways when it does not fit the page. ## Summary | Type | Mermaid keyword | Goldens that match | Text drawing | | ---------------------------------------------------------------------------------- | -------------------- | -----------------: | ----------------------------------------------------------------------------------- | | [Flowchart](https://tuios.dev/docs/libraries/sketch/diagram-types#flowchart) | `flowchart` | 114 of 114 | The layout of the SVG, mapped to cells | | [State](https://tuios.dev/docs/libraries/sketch/diagram-types#state) | `stateDiagram-v2` | 22 of 22 | The layout of the SVG, mapped to cells, with composite states as frames | | [Class](https://tuios.dev/docs/libraries/sketch/diagram-types#class) | `classDiagram` | 38 of 38 | The layout of the SVG, mapped to cells, with the members in each box | | [Entity relationship](https://tuios.dev/docs/libraries/sketch/diagram-types#er) | `erDiagram` | 25 of 25 | The layout of the SVG, mapped to cells, with the attributes in each box | | [Block](https://tuios.dev/docs/libraries/sketch/diagram-types#block) | `block` | 30 of 30 | Drawn as a flowchart is | | [Architecture](https://tuios.dev/docs/libraries/sketch/diagram-types#architecture) | `architecture-beta` | 6 of 6 | Drawn as a flowchart is | | [Requirement](https://tuios.dev/docs/libraries/sketch/diagram-types#requirement) | `requirementDiagram` | 9 of 9 | Drawn as a flowchart is | | [C4](https://tuios.dev/docs/libraries/sketch/diagram-types#c4) | `C4Context` | 6 of 6 | Drawn as a flowchart is | | [Use case](https://tuios.dev/docs/libraries/sketch/diagram-types#usecase) | `usecase-beta` | 24 of 24 | Drawn as a flowchart is | | [Agent flow](https://tuios.dev/docs/libraries/sketch/diagram-types#agentflow) | `agentflow-beta` | 12 of 12 | Drawn as a flowchart is | | [Swimlane](https://tuios.dev/docs/libraries/sketch/diagram-types#swimlane) | `swimlane-beta` | 13 of 13 | A flowchart with its lanes as bands | | [Sequence](https://tuios.dev/docs/libraries/sketch/diagram-types#sequence) | `sequenceDiagram` | 38 of 38 | The layout of the SVG, mapped to cells: lifelines run down, and messages run across | | [Gantt](https://tuios.dev/docs/libraries/sketch/diagram-types#gantt) | `gantt` | 11 of 11 | Bars on a date axis | | [Timeline](https://tuios.dev/docs/libraries/sketch/diagram-types#timeline) | `timeline` | 14 of 14 | It runs across, and runs down when it does not fit the columns | | [User journey](https://tuios.dev/docs/libraries/sketch/diagram-types#journey) | `journey` | 1 of 1 | It runs across, and runs down when it does not fit the columns | | [Git graph](https://tuios.dev/docs/libraries/sketch/diagram-types#gitgraph) | `gitGraph` | 35 of 35 | It runs down, one row for each commit, with the oldest commit at the top | | [Event model](https://tuios.dev/docs/libraries/sketch/diagram-types#eventmodeling) | `eventmodeling` | 12 of 12 | Swimlanes in time order, or a list of frames when it is narrow | | [Pie](https://tuios.dev/docs/libraries/sketch/diagram-types#pie) | `pie` | 2 of 2 | A disc of half blocks, a colour for each slice, with a legend | | [XY chart](https://tuios.dev/docs/libraries/sketch/diagram-types#xychart) | `xychart` | 8 of 8 | Bars and lines drawn with [plot](https://tuios.dev/docs/libraries/plot) | | [Quadrant chart](https://tuios.dev/docs/libraries/sketch/diagram-types#quadrant) | `quadrantChart` | 3 of 3 | A box in four parts, with the points as dots | | [Sankey](https://tuios.dev/docs/libraries/sketch/diagram-types#sankey) | `sankey` | 8 of 8 | Columns of boxes joined by lines | | [Radar](https://tuios.dev/docs/libraries/sketch/diagram-types#radar) | `radar-beta` | 3 of 3 | A radar in braille dots, a colour for each curve | | [Treemap](https://tuios.dev/docs/libraries/sketch/diagram-types#treemap) | `treemap-beta` | 8 of 8 | Nested boxes, or an indented tree when the boxes are too small | | [Venn](https://tuios.dev/docs/libraries/sketch/diagram-types#venn) | `venn-beta` | 8 of 8 | A table of the sets and their overlaps | | [Packet](https://tuios.dev/docs/libraries/sketch/diagram-types#packet) | `packet` | 4 of 4 | Rows of bit fields | | [Mindmap](https://tuios.dev/docs/libraries/sketch/diagram-types#mindmap) | `mindmap` | 13 of 13 | A tree | | [Tree view](https://tuios.dev/docs/libraries/sketch/diagram-types#treeview) | `treeView-beta` | 13 of 13 | Drawn as the `tree` command draws a folder | | [Ishikawa](https://tuios.dev/docs/libraries/sketch/diagram-types#ishikawa) | `ishikawa-beta` | 1 of 1 | A spine with the causes as bones, or an indented tree when it is narrow | | [Kanban](https://tuios.dev/docs/libraries/sketch/diagram-types#kanban) | `kanban` | 3 of 3 | Columns side by side, in more rows when they do not fit | | [Cynefin](https://tuios.dev/docs/libraries/sketch/diagram-types#cynefin) | `cynefin-beta` | 3 of 3 | A grid of the four domains | | [Wardley map](https://tuios.dev/docs/libraries/sketch/diagram-types#wardley) | `wardley-beta` | 19 of 19 | A grid of visibility by evolution, or a table when it is narrow | | [Railroad](https://tuios.dev/docs/libraries/sketch/diagram-types#railroad) | `railroad-ebnf-beta` | 14 of 14 | The tracks in cells, or the rules as EBNF text when they do not fit | The goldens are the SVG files that pele drew from the 522 sources of its documentation corpus. sketch must write the same file, byte for byte. [Fidelity and tests](https://tuios.dev/docs/libraries/sketch#fidelity-and-tests) says how. A Mermaid type that pele does not draw, such as `zenuml`, gives an error with the code `unsupported-diagram`. ## Graphs Boxes joined by lines. sketch works out the layout in layers, as pele does. `sketch/text` maps that layout to cells. ### Flowchart - **Keyword:** `flowchart`, `graph` or `flowchart-elk`, with a direction such as `TB` or `LR`. - **Goldens:** 114 of 114 match pele. - **Text:** The layout of the SVG, mapped to cells. When it does not fit, sketch asks for a narrower layout: a flowchart that runs across turns to run down, and columns that hold only gaps close up. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### State - **Keyword:** `stateDiagram-v2` or `stateDiagram`. - **Goldens:** 22 of 22 match pele. - **Text:** The layout of the SVG, mapped to cells, with composite states as frames. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Class - **Keyword:** `classDiagram`. - **Goldens:** 38 of 38 match pele. - **Text:** The layout of the SVG, mapped to cells, with the members in each box. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Entity relationship - **Keyword:** `erDiagram`. - **Goldens:** 25 of 25 match pele. - **Text:** The layout of the SVG, mapped to cells, with the attributes in each box. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Block - **Keyword:** `block` or `block-beta`. - **Goldens:** 30 of 30 match pele. - **Text:** Drawn as a flowchart is. A block arrow shows an arrow character. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Architecture - **Keyword:** `architecture-beta`, or `architecture`. - **Goldens:** 6 of 6 match pele. - **Text:** Drawn as a flowchart is. A service with no title shows the name of its icon. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Requirement - **Keyword:** `requirementDiagram`, or `requirement`. - **Goldens:** 9 of 9 match pele. - **Text:** Drawn as a flowchart is. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### C4 - **Keyword:** `C4Context`, `C4Container`, `C4Component`, `C4Dynamic` or `C4Deployment`. - **Goldens:** 6 of 6 match pele. - **Text:** Drawn as a flowchart is. - **Known difference:** At some widths an edge label writes over a box border or a boundary title. The drawing at 80 columns is clean. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Use case - **Keyword:** `usecase-beta`. - **Goldens:** 24 of 24 match pele. - **Text:** Drawn as a flowchart is. - **Known difference:** The edges of an actor start a few cells to the right of the figure and join into one line. It can be hard to see which actor goes where. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Agent flow - **Keyword:** `agentflow-beta`. - **Goldens:** 12 of 12 match pele. - **Text:** Drawn as a flowchart is. - **Known difference:** A note link whose name starts with two backslashes is written as pele writes it. The scheme stays https, so the link allowlist holds. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Swimlane - **Keyword:** `swimlane-beta`. - **Goldens:** 13 of 13 match pele. - **Text:** A flowchart with its lanes as bands. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ## Time and order Diagrams that run along time, or along the order of events. ### Sequence - **Keyword:** `sequenceDiagram`. - **Goldens:** 38 of 38 match pele. - **Text:** The layout of the SVG, mapped to cells: lifelines run down, and messages run across. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Gantt - **Keyword:** `gantt`. - **Goldens:** 11 of 11 match pele. - **Text:** Bars on a date axis. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Timeline - **Keyword:** `timeline`. - **Goldens:** 14 of 14 match pele. - **Text:** It runs across, and runs down when it does not fit the columns. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### User journey - **Keyword:** `journey`. - **Goldens:** 1 of 1 match pele. - **Text:** It runs across, and runs down when it does not fit the columns. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Git graph - **Keyword:** `gitGraph`. - **Goldens:** 35 of 35 match pele. - **Text:** It runs down, one row for each commit, with the oldest commit at the top. Each branch has its own colour. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Event model - **Keyword:** `eventmodeling`. - **Goldens:** 12 of 12 match pele. - **Text:** Swimlanes in time order, or a list of frames when it is narrow. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ## Charts Numbers drawn as shapes. In text, most charts become bars, grids or tables. ### Pie - **Keyword:** `pie`. `showData` shows the values. - **Goldens:** 2 of 2 match pele. - **Text:** A disc of half blocks with a legend: each slice's colour, label, percentage and, with `showData`, value. As in pele, a slice under 1% is left out of the disc. Without colour, or in 40 columns or fewer, one bar for each slice. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### XY chart - **Keyword:** `xychart` or `xychart-beta`. - **Goldens:** 8 of 8 match pele. - **Text:** Bars and lines drawn with [plot](https://tuios.dev/docs/libraries/plot). Categories turn into rows when they do not fit across. Point labels and bar values go where they cover nothing. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Quadrant chart - **Keyword:** `quadrantChart`. - **Goldens:** 3 of 3 match pele. - **Text:** A box in four parts, with the points as dots. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Sankey - **Keyword:** `sankey` or `sankey-beta`. - **Goldens:** 8 of 8 match pele. - **Text:** Columns of boxes joined by lines. When two lines would join, when lines cross more than three times, or when the columns do not fit, it is a table of flows: source, target and value. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Radar - **Keyword:** `radar-beta`. - **Goldens:** 3 of 3 match pele. - **Text:** A radar in braille dots: a spoke for each axis, the rings, and each curve in its own colour, with the axis labels around it. Without colour, or in 40 columns or fewer, a table with one bar for each curve on each axis. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Treemap - **Keyword:** `treemap-beta`, or `treemap`. - **Goldens:** 8 of 8 match pele. - **Text:** Nested boxes, or an indented tree when the boxes are too small. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Venn - **Keyword:** `venn-beta`. - **Goldens:** 8 of 8 match pele. - **Text:** A table of the sets and their overlaps. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Packet - **Keyword:** `packet` or `packet-beta`. - **Goldens:** 4 of 4 match pele. - **Text:** Rows of bit fields. - **Known difference:** At 40 columns, one-bit fields draw as empty columns, and a long label can break inside a word. At 80 columns a one-bit label reads down, one letter a row. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ## Trees, boards and maps Outlines, boards and two-axis maps. ### Mindmap - **Keyword:** `mindmap`. - **Goldens:** 13 of 13 match pele. - **Text:** A tree. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Tree view - **Keyword:** `treeView-beta`. - **Goldens:** 13 of 13 match pele. - **Text:** Drawn as the `tree` command draws a folder. - **Known difference:** A very long file name at 40 columns makes the drawing fall back to its own width. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Ishikawa - **Keyword:** `ishikawa-beta`, or `ishikawa`. - **Goldens:** 1 of 1 match pele. - **Text:** A spine with the causes as bones, or an indented tree when it is narrow. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Kanban - **Keyword:** `kanban`. - **Goldens:** 3 of 3 match pele. - **Text:** Columns side by side, in more rows when they do not fit. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Cynefin - **Keyword:** `cynefin-beta`. - **Goldens:** 3 of 3 match pele. - **Text:** A grid of the four domains. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Wardley map - **Keyword:** `wardley-beta`. - **Goldens:** 19 of 19 match pele. - **Text:** A grid of visibility by evolution, or a table when it is narrow. - **Known difference:** When labels crowd, a label can move away from its dot. At 40 columns a dot can hide under another label. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)* ### Railroad - **Keyword:** `railroad-ebnf-beta`, `railroad-abnf-beta`, `railroad-peg-beta` or `railroad-beta`. - **Goldens:** 14 of 14 match pele. - **Text:** The tracks in cells, or the rules as EBNF text when they do not fit. *[An interactive figure goes here. Open the page to use it.](https://tuios.dev/docs/libraries/sketch/diagram-types)*