[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams":3},{"html":4,"toc":5,"description":22,"hero":23,"list":24,"socialImage":25},"\u003Ch1 id=\"diagramme\">Diagramme\u003C\u002Fh1>\n\u003Cp>Zeichne Diagramme aus Text mit \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>: Schreib einen Codeblock in der Sprache \u003Ccode>mermaid\u003C\u002Fcode>, und Clay zeichnet ihn in den Farben deiner Seite, hell oder dunkel.\u003C\u002Fp>\n\u003Ch2 id=\"flussdiagramme\">\u003Ca class=\"heading-anchor\" href=\"#flussdiagramme\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#flussdiagramme\">#\u003C\u002Fa>Flussdiagramme\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[Markdown schreiben] --> 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 -- Warnungen --> D[Build scheitert]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  C -- keine Warnungen --> E([Seite 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=\"Code kopieren\" aria-label=\"Code kopieren\">\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 909.326 190.41\" width=\"909.326\" 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=\"207.92,95.205 255.92,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=\"353.445,95.205 401.445,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=\"Warnungen\" points=\"493.4533333333333,76.80333333333333 547.855,76.80333333333333 547.855,62.75499999999999 686.706,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=\"keine Warnungen\" points=\"493.4533333333334,113.60666666666665 547.855,113.60666666666665 547.855,127.655 686.706,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=\"Warnungen\">\n  \u003Crect x=\"555.855\" y=\"46.75499999999999\" width=\"72.89200000000001\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"592.301\" y=\"61.90499999999999\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">Warnungen\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"edge-label\" data-from=\"C\" data-to=\"E\" data-label=\"keine Warnungen\">\n  \u003Crect x=\"555.855\" y=\"111.655\" width=\"100.81000000000002\" height=\"30.3\" rx=\"2\" ry=\"2\" fill=\"var(--bg)\" stroke=\"var(--_inner-stroke)\" stroke-width=\"1\">\u003C\u002Frect>\n  \u003Ctext x=\"606.26\" y=\"126.805\" text-anchor=\"middle\" font-size=\"11\" font-weight=\"400\" fill=\"var(--_text-sec)\" dy=\"3.8499999999999996\">keine Warnungen\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"A\" data-label=\"Markdown schreiben\" data-shape=\"rectangle\">\n  \u003Crect x=\"40\" y=\"76.755\" width=\"167.92\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"123.96\" y=\"95.205\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Markdown schreiben\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"B\" data-label=\"clay build\" data-shape=\"rectangle\">\n  \u003Crect x=\"255.92\" 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=\"304.6825\" 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=\"456.65,40 511.85499999999996,95.205 456.65,150.41 401.445,95.205\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Fpolygon>\n  \u003Ctext x=\"456.65\" 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 scheitert\" data-shape=\"rectangle\">\n  \u003Crect x=\"686.706\" y=\"44.304999999999986\" width=\"125.68300000000002\" height=\"36.900000000000006\" rx=\"0\" ry=\"0\" fill=\"var(--_node-fill)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Frect>\n  \u003Ctext x=\"749.5475\" y=\"62.75499999999999\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Build scheitert\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"node\" data-id=\"E\" data-label=\"Seite in publish\u002Fpublic\" data-shape=\"stadium\">\n  \u003Crect x=\"686.706\" y=\"109.20499999999998\" width=\"168.661\" 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=\"771.0365\" y=\"127.65499999999999\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"500\" fill=\"var(--_text)\" dy=\"4.55\">Seite in publish\u002Fpublic\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003C\u002Fsvg>\u003C\u002Fdiv>\n\u003Ch2 id=\"sequenzdiagramme\">\u003Ca class=\"heading-anchor\" href=\"#sequenzdiagramme\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#sequenzdiagramme\">#\u003C\u002Fa>Sequenzdiagramme\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 Leser\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  participant Seite\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Leser->>Seite: Seite öffnen\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Seite-->>Leser: Vorgerendertes HTML\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Note over Leser,Seite: Kein Code läuft auf dem Server\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Leser->>Seite: Suchen\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  Seite-->>Leser: Suchindex, einmal geladen\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=\"Code kopieren\" aria-label=\"Code kopieren\">\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=\"Leser\" 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=\"Seite\" 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=\"Leser\" data-to=\"Seite\" data-label=\"Seite öffnen\" 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\">Seite öffnen\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Seite\" data-to=\"Leser\" data-label=\"Vorgerendertes 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\">Vorgerendertes HTML\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Leser\" data-to=\"Seite\" data-label=\"Suchen\" 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\">Suchen\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"message\" data-from=\"Seite\" data-to=\"Leser\" data-label=\"Suchindex, einmal geladen\" 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\">Suchindex, einmal geladen\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"note\" data-position=\"over\" data-actors=\"Leser,Seite\">\n  \u003Cpolygon points=\"56.19199999999998,138 217.80800000000002,138 223.80800000000002,144 223.80800000000002,161 56.19199999999998,161\" fill=\"var(--bg)\" stroke=\"var(--_node-stroke)\" stroke-width=\"0.75\">\u003C\u002Fpolygon>\n  \u003Cpolygon points=\"217.80800000000002,138 223.80800000000002,144 217.80800000000002,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\">Kein Code läuft auf dem Server\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"actor\" data-id=\"Leser\" data-label=\"Leser\" 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\">Leser\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003Cg class=\"actor\" data-id=\"Seite\" data-label=\"Seite\" 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\">Seite\u003C\u002Ftext>\n\u003C\u002Fg>\n\u003C\u002Fsvg>\u003C\u002Fdiv>\n\u003Ch2 id=\"kreisdiagramme\">\u003Ca class=\"heading-anchor\" href=\"#kreisdiagramme\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#kreisdiagramme\">#\u003C\u002Fa>Kreisdiagramme\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 Seiten je Bereich\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Schreiben\" : 14\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Konfiguration\" : 4\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  \"Veröffentlichen\" : 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=\"Code kopieren\" aria-label=\"Code kopieren\">\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 Seiten je Bereich\n  \"Schreiben\" : 14\n  \"Konfiguration\" : 4\n  \"Veröffentlichen\" : 3\u003C\u002Fpre>\u003C\u002Fdiv>\n\u003Cp>Mermaid zeichnet viele weitere Arten: Zustands-, Klassen- und Entity-Relationship-Diagramme, Gantt-Diagramme, Zeitleisten, Mindmaps und Git-Graphen. Seine \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>Dokumentation\u003C\u002Fa> zeigt jede mit Beispielen.\u003C\u002Fp>\n\u003Ch2 id=\"wie-diagramme-gezeichnet-werden\">\u003Ca class=\"heading-anchor\" href=\"#wie-diagramme-gezeichnet-werden\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#wie-diagramme-gezeichnet-werden\">#\u003C\u002Fa>Wie Diagramme gezeichnet werden\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>In den Farben deiner Seite.\u003C\u002Fstrong> Kästen, Linien und Text nehmen die Farben des hellen oder dunklen Designs an und werden neu gezeichnet, wenn Leser umschalten.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Nur wo nötig.\u003C\u002Fstrong> Mermaid ist groß, der Browser lädt es nur auf Seiten mit Diagrammen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Bevor es geladen ist\u003C\u002Fstrong>, oder ohne JavaScript, erscheint der Quelltext des Diagramms.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Sicher.\u003C\u002Fstrong> Beschriftungen sind Text: Diagramme können keine Skripte ausführen, und Klicks darin bewirken nichts.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Fehler\u003C\u002Fstrong> zeigen eine Meldung mit dem Quelltext darunter, damit du siehst, was zu korrigieren ist.\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>Tipp\u003C\u002Fp>\n\u003Cp>Gib einem Diagramm einen Titel und eine Beschreibung für Screenreader, mit Zeilen \u003Ccode>accTitle: …\u003C\u002Fcode> und \u003Ccode>accDescr: …\u003C\u002Fcode> unter seiner ersten Zeile.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"auf-github\">\u003Ca class=\"heading-anchor\" href=\"#auf-github\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#auf-github\">#\u003C\u002Fa>Auf GitHub\u003C\u002Fh2>\n\u003Cp>GitHub zeichnet \u003Ccode>mermaid\u003C\u002Fcode>-Codeblöcke ebenfalls, Diagramme sehen also auch im Repository richtig aus.\u003C\u002Fp>\n",[6,10,13,16,19],{"id":7,"text":8,"level":9},"flussdiagramme","Flussdiagramme",2,{"id":11,"text":12,"level":9},"sequenzdiagramme","Sequenzdiagramme",{"id":14,"text":15,"level":9},"kreisdiagramme","Kreisdiagramme",{"id":17,"text":18,"level":9},"wie-diagramme-gezeichnet-werden","Wie Diagramme gezeichnet werden",{"id":20,"text":21,"level":9},"auf-github","Auf GitHub","Flussdiagramme, Sequenzdiagramme, Kreisdiagramme und mehr aus Text mit Mermaid, in den Farben deiner Seite.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Fdiagrams.png",1792666372956]