[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams":3},{"html":4,"toc":5,"description":22,"hero":23,"list":24,"socialImage":25},"\u003Ch1 id=\"diagrams\">Diagrams\u003C\u002Fh1>\n\u003Cp>Draw diagrams from text with \u003Ca href=\"https:\u002F\u002Fmermaid.js.org\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Mermaid\u003C\u002Fa>: write a code block in the language \u003Ccode>mermaid\u003C\u002Fcode>, and Clay draws it in the colors of your site, light or dark.\u003C\u002Fp>\n\u003Ch2 id=\"flowcharts\">\u003Ca class=\"heading-anchor\" href=\"#flowcharts\" aria-label=\"Link to this section\" data-route=\"#flowcharts\">#\u003C\u002Fa>Flowcharts\u003C\u002Fh2>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```mermaid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">flowchart LR\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  A[Write Markdown] --> B[clay build]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  B --> C{--strict?}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  C -- warnings --> D[Build fails]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  C -- no warnings --> E([Site in publish\u002Fpublic])\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"mermaid-diagram\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 845.9929999999999 190.41\" width=\"845.9929999999999\" height=\"190.41\">\n\n\u003Cdefs>\n  \u003Cmarker id=\"diagram-1-arrowhead\" markerWidth=\"8\" markerHeight=\"5\" refX=\"7\" refY=\"2.5\" orient=\"auto\">\n    \u003Cpolygon points=\"0 0, 8 2.5, 0 5\" fill=\"var(--_arrow)\" stroke=\"var(--_arrow)\" stroke-width=\"0.75\" stroke-linejoin=\"round\">\u003C\u002Fpolygon>\n  \u003C\u002Fmarker>\n  \u003Cmarker id=\"diagram-1-arrowhead-start\" markerWidth=\"8\" markerHeight=\"5\" refX=\"1\" refY=\"2.5\" orient=\"auto-start-reverse\">\n    \u003Cpolygon points=\"8 0, 0 2.5, 8 5\" fill=\"var(--_arrow)\" stroke=\"var(--_arrow)\" stroke-width=\"0.75\" stroke-linejoin=\"round\">\u003C\u002Fpolygon>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n\u003Cpolyline class=\"edge\" data-from=\"A\" data-to=\"B\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" points=\"177.539,95.205 225.539,95.205\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"B\" data-to=\"C\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" points=\"323.06399999999996,95.205 371.06399999999996,95.205\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"C\" data-to=\"D\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"warnings\" points=\"463.0723333333333,76.80333333333333 517.4739999999999,76.80333333333333 517.4739999999999,62.75499999999999 637.911,62.75499999999999\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cpolyline class=\"edge\" data-from=\"C\" data-to=\"E\" data-style=\"solid\" data-arrow-start=\"false\" data-arrow-end=\"true\" data-label=\"no warnings\" points=\"463.0723333333333,113.60666666666665 517.4739999999999,113.60666666666665 517.4739999999999,127.655 637.911,127.65499999999999\" fill=\"none\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-1-arrowhead)\">\u003C\u002Fpolyline>\n\u003Cg class=\"edge-label\" data-from=\"C\" data-to=\"D\" data-label=\"warnings\">\n  \u003Crect x=\"525.4739999999999\" y=\"46.75499999999999\" width=\"61.606\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"556.2769999999999\" y=\"61.90499999999999\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">warnings\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"edge-label\" data-from=\"C\" data-to=\"E\" data-label=\"no warnings\">\n  \u003Crect x=\"525.4739999999999\" y=\"111.655\" width=\"75.268\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"563.108\" y=\"126.805\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">no warnings\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"A\" data-label=\"Write Markdown\" data-shape=\"rectangle\">\n  \u003Crect x=\"40\" y=\"76.755\" width=\"137.539\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"108.7695\" y=\"95.205\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Write Markdown\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"B\" data-label=\"clay build\" data-shape=\"rectangle\">\n  \u003Crect x=\"225.539\" y=\"76.755\" width=\"97.525\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"274.3015\" y=\"95.205\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">clay build\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"C\" data-label=\"--strict?\" data-shape=\"diamond\">\n  \u003Cpolygon points=\"426.26899999999995,40 481.47399999999993,95.205 426.26899999999995,150.41 371.06399999999996,95.205\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Fpolygon>\n  \u003Ctext x=\"426.26899999999995\" y=\"95.205\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">--strict?\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"D\" data-label=\"Build fails\" data-shape=\"rectangle\">\n  \u003Crect x=\"637.911\" y=\"44.304999999999986\" width=\"97.525\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"686.6735\" y=\"62.75499999999999\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Build fails\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"E\" data-label=\"Site in publish\u002Fpublic\" data-shape=\"stadium\">\n  \u003Crect x=\"637.911\" y=\"109.20499999999998\" width=\"161.251\" height=\"36.900000000000006\" rx=\"18.450000000000003\" ry=\"18.450000000000003\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"718.5364999999999\" y=\"127.65499999999999\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Site in publish\u002Fpublic\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003C\u002Fsvg>\u003C\u002Fdiv>\n\u003Ch2 id=\"sequence-diagrams\">\u003Ca class=\"heading-anchor\" href=\"#sequence-diagrams\" aria-label=\"Link to this section\" data-route=\"#sequence-diagrams\">#\u003C\u002Fa>Sequence diagrams\u003C\u002Fh2>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```mermaid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">sequenceDiagram\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  participant Reader\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  participant Site\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Reader->>Site: Open a page\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Site-->>Reader: Pre-rendered HTML\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Note over Reader,Site: No server-side code runs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Reader->>Site: Search\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Site-->>Reader: Search index, loaded once\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"mermaid-diagram\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 280 295\" width=\"280\" height=\"295\">\n\n\u003Cdefs>\n  \u003Cmarker id=\"diagram-2-seq-arrow\" markerWidth=\"8\" markerHeight=\"5\" refX=\"8\" refY=\"2.5\" orient=\"auto-start-reverse\">\n    \u003Cpolygon points=\"0 0, 8 2.5, 0 5\" fill=\"var(--_arrow)\">\u003C\u002Fpolygon>\n  \u003C\u002Fmarker>\n  \u003Cmarker id=\"diagram-2-seq-arrow-open\" markerWidth=\"8\" markerHeight=\"5\" refX=\"8\" refY=\"2.5\" orient=\"auto-start-reverse\">\n    \u003Cpolyline points=\"0 0, 8 2.5, 0 5\" fill=\"none\" stroke=\"var(--_arrow)\" stroke-width=\"1\">\u003C\u002Fpolyline>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n\u003Cline class=\"lifeline\" data-actor=\"Reader\" x1=\"70\" y1=\"70\" x2=\"70\" y2=\"265\" stroke=\"var(--_line)\" stroke-width=\"0.75\" stroke-dasharray=\"6 4\">\u003C\u002Fline>\n\u003Cline class=\"lifeline\" data-actor=\"Site\" x1=\"210\" y1=\"70\" x2=\"210\" y2=\"265\" stroke=\"var(--_line)\" stroke-width=\"0.75\" stroke-dasharray=\"6 4\">\u003C\u002Fline>\n\u003Cg class=\"message\" data-from=\"Reader\" data-to=\"Site\" data-label=\"Open a page\" data-line-style=\"solid\" data-arrow-head=\"filled\" data-self=\"false\">\n  \u003Cline x1=\"70\" y1=\"90\" x2=\"210\" y2=\"90\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-2-seq-arrow)\">\u003C\u002Fline>\n  \u003Ctext x=\"140\" y=\"80\" font-size=\"11\" text-anchor=\"middle\" font-weight=\"400\" fill=\"var(--_text-muted)\" dy=\"3.8499999999999996\">Open a page\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Site\" data-to=\"Reader\" data-label=\"Pre-rendered HTML\" data-line-style=\"dashed\" data-arrow-head=\"filled\" data-self=\"false\">\n  \u003Cline x1=\"210\" y1=\"130\" x2=\"70\" y2=\"130\" stroke=\"var(--_line)\" stroke-width=\"1\" stroke-dasharray=\"6 4\" marker-end=\"url(#diagram-2-seq-arrow)\">\u003C\u002Fline>\n  \u003Ctext x=\"140\" y=\"120\" font-size=\"11\" text-anchor=\"middle\" font-weight=\"400\" fill=\"var(--_text-muted)\" dy=\"3.8499999999999996\">Pre-rendered HTML\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Reader\" data-to=\"Site\" data-label=\"Search\" data-line-style=\"solid\" data-arrow-head=\"filled\" data-self=\"false\">\n  \u003Cline x1=\"70\" y1=\"185\" x2=\"210\" y2=\"185\" stroke=\"var(--_line)\" stroke-width=\"1\" marker-end=\"url(#diagram-2-seq-arrow)\">\u003C\u002Fline>\n  \u003Ctext x=\"140\" y=\"175\" font-size=\"11\" text-anchor=\"middle\" font-weight=\"400\" fill=\"var(--_text-muted)\" dy=\"3.8499999999999996\">Search\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Site\" data-to=\"Reader\" data-label=\"Search index, loaded once\" data-line-style=\"dashed\" data-arrow-head=\"filled\" data-self=\"false\">\n  \u003Cline x1=\"210\" y1=\"225\" x2=\"70\" y2=\"225\" stroke=\"var(--_line)\" stroke-width=\"1\" stroke-dasharray=\"6 4\" marker-end=\"url(#diagram-2-seq-arrow)\">\u003C\u002Fline>\n  \u003Ctext x=\"140\" y=\"215\" font-size=\"11\" text-anchor=\"middle\" font-weight=\"400\" fill=\"var(--_text-muted)\" dy=\"3.8499999999999996\">Search index, loaded once\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"note\" data-position=\"over\" data-actors=\"Reader,Site\">\n  \u003Cpolygon points=\"66.58699999999999,138 207.413,138 213.413,144 213.413,161 66.58699999999999,161\" fill=\"var(--bg)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Fpolygon>\n  \u003Cpolygon points=\"207.413,138 213.413,144 207.413,144\" fill=\"var(--_inner-stroke)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Fpolygon>\n  \u003Ctext x=\"140\" y=\"149.5\" font-size=\"11\" text-anchor=\"middle\" font-weight=\"400\" fill=\"var(--_text-muted)\" dy=\"3.8499999999999996\">No server-side code runs\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"actor\" data-id=\"Reader\" data-label=\"Reader\" data-type=\"participant\">\n  \u003Crect x=\"30\" y=\"30\" width=\"80\" height=\"40\" rx=\"4\" ry=\"4\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"70\" y=\"50\" font-size=\"13\" text-anchor=\"middle\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Reader\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"actor\" data-id=\"Site\" data-label=\"Site\" data-type=\"participant\">\n  \u003Crect x=\"170\" y=\"30\" width=\"80\" height=\"40\" rx=\"4\" ry=\"4\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"210\" y=\"50\" font-size=\"13\" text-anchor=\"middle\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Site\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003C\u002Fsvg>\u003C\u002Fdiv>\n\u003Ch2 id=\"pie-charts\">\u003Ca class=\"heading-anchor\" href=\"#pie-charts\" aria-label=\"Link to this section\" data-route=\"#pie-charts\">#\u003C\u002Fa>Pie charts\u003C\u002Fh2>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```mermaid\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">pie title Pages by section\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Writing\" : 14\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Configuration\" : 4\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Deployment\" : 3\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"mermaid-diagram\" data-client=\"\">\u003Cpre class=\"mermaid-source\">pie title Pages by section\n  \"Writing\" : 14\n  \"Configuration\" : 4\n  \"Deployment\" : 3\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>Mermaid draws many more kinds: state, class and entity-relationship diagrams, Gantt charts, timelines, mind maps and Git graphs. Its \u003Ca href=\"https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>documentation\u003C\u002Fa> shows each with examples.\u003C\u002Fp>\n\u003Ch2 id=\"how-diagrams-are-drawn\">\u003Ca class=\"heading-anchor\" href=\"#how-diagrams-are-drawn\" aria-label=\"Link to this section\" data-route=\"#how-diagrams-are-drawn\">#\u003C\u002Fa>How diagrams are drawn\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>In your site’s colors.\u003C\u002Fstrong> Boxes, lines and text take the colors of the light or the dark theme, and are drawn again when a reader switches.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Only where needed.\u003C\u002Fstrong> Mermaid is large, so the browser only loads it on pages with diagrams.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Before it loads\u003C\u002Fstrong>, or without JavaScript, the diagram’s source shows instead.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Safely.\u003C\u002Fstrong> Labels are text: diagrams cannot run scripts, and clicks in them do nothing.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Mistakes\u003C\u002Fstrong> show a message with the source below it, so you see what to fix.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>Give a diagram a title and a description for screen readers with \u003Ccode>accTitle: …\u003C\u002Fcode> and \u003Ccode>accDescr: …\u003C\u002Fcode> lines below its first line.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"on-github\">\u003Ca class=\"heading-anchor\" href=\"#on-github\" aria-label=\"Link to this section\" data-route=\"#on-github\">#\u003C\u002Fa>On GitHub\u003C\u002Fh2>\n\u003Cp>GitHub draws \u003Ccode>mermaid\u003C\u002Fcode> code blocks too, so diagrams look right in the repository as well.\u003C\u002Fp>\n",[6,10,13,16,19],{"id":7,"text":8,"level":9},"flowcharts","Flowcharts",2,{"id":11,"text":12,"level":9},"sequence-diagrams","Sequence diagrams",{"id":14,"text":15,"level":9},"pie-charts","Pie charts",{"id":17,"text":18,"level":9},"how-diagrams-are-drawn","How diagrams are drawn",{"id":20,"text":21,"level":9},"on-github","On GitHub","Flowcharts, sequence diagrams, pie charts and more from text with Mermaid, in the colors of your site.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fwriting\u002Fcomponents\u002Fdiagrams.png",1792666369769]