{ "generatedFrom": { "packageVersion": "0.4.1", "gitSha": "d2d821cb07f46d39770c3b731c346ef0c22ea773", "buildTime": "2026-07-31T11:27:14Z" }, "examples": [ { "id": "flowchart-basic", "family": "flowchart", "label": "Flowchart", "description": "Decision flow with labeled branches.", "headers": [ "flowchart", "graph" ], "source": "flowchart TD\n A[Start] --> B{Decision?}\n B -->|Yes| C[Do the thing]\n B -->|No| D[Skip it]\n C --> E[End]\n D --> E", "renderUrl": "/examples/#flowchart", "editorUrl": "/editor/#deflate:RZAxb8IwEIX_inVZjVSgkJChVYLJyEKXKmUwzoVYDXbkXGgr4L9X5w696d73pHdPd4PRT8Eg5ND2_st0OpB4Ux9OiKI-kA50FLPZiyhvCo0drXevDzZLpvd3HO9iWysvqENBnXXn47-793eh6sOnHYSlyLcxa1fvXBO1-tMgYdA9EnENkDDST8-rCXYcWCM2kD9JMN619gz5DU5nyCGp4oCENspFukgXBUjQxqAjRvMiXa7mIKG3jiOTrNykGwaXiTgVkpVaZ-tnPjOFVsdXJFVWFVUGEk4-NBgYqaVSKuVbPkYXV3Q2iD1-E0iwjjBoQ_aKkLe6H5HbXgZtCHIKEz4evw", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#flowchart" }, { "id": "state-basic", "family": "state", "label": "State diagram", "description": "Lifecycle using Mermaid stateDiagram-v2 syntax.", "headers": [ "stateDiagram", "stateDiagram-v2" ], "source": "stateDiagram-v2\n [*] --> Idle\n Idle --> Processing: start\n Processing --> Complete: done\n Processing --> Failed: error\n Failed --> Idle: retry\n Complete --> [*]", "renderUrl": "/examples/#state", "editorUrl": "/editor/#deflate:bZDBasMwEER_RaxvQYHGaWJHh4JbY-il9J7moMhrI7Als1qHhpB_L-vS9lJdpHmzzCy6QYozOQQDiS1j7W1Pdlxf8o-g1HF1Uuv1k3ptBxQt9wLeKTpMyYfeqMSWWNw_uMy8xHEakNGoNgb8Z6CxfsDWKCSKJP43-G00ipDpKs5P1uIdVyfQMNkBmWVx0JD4OsjTkU-TaMQWzIMGF0PnezA3OPdgIGuWAxq6ReZFXuQVaLDOYWBBm6rY7jagYfBBIrPy-VAcBIwzSypku3pf7h-lZqbOLp-XNWVTNSVoOEdqkQTV27quC-mKS3R1weBJveEngwYfGMk69hcE09khoWw7TtYxGKYZ7_cv", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#state" }, { "id": "sequence-basic", "family": "sequence", "label": "Sequence", "description": "Request/response messages between participants.", "headers": [ "sequenceDiagram" ], "source": "sequenceDiagram\n participant User\n participant App\n participant API\n User->>App: Click export\n App->>API: Render SVG\n API-->>App: SVG string\n App-->>User: Download", "renderUrl": "/examples/#sequence", "editorUrl": "/editor/#deflate:ZZDBbsIwDIZfJXKvQdpg0JJDpWxREZcJDY3TLiF1q2glyZKUMSHefXIlLptP9vfbvy1fIfkxGgQBCb9GdAaV1X3Upw_HWNAxW2ODdpm9J4x_mQzhH9ptCVH3rK5lCIK9DNZ8MrwEHzNpMgSSdlvB3tC1GNn-sJmE3XZ2H9ofNizlaF1_H5nVNbkKpvy3G7xugUPQA-ZM1wOHlH8GSk20KVCN2IJ44GC862wP4grHHgQUzRTAoZvKeTkv5xI4aGPQZUKPslwsH4HDYB1ZFtXzulwTOI2ZXKFYqlW1eqI1Y-z09MGiqRrZVMDh6GOLkZBaKKVK2uUna3lGZyN7xUsGDtZljNpke0YQnR4S0rWnoE0GkeOIt9sv", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#sequence" }, { "id": "timeline-basic", "family": "timeline", "label": "Timeline", "description": "Chronological milestones with sections.", "headers": [ "timeline" ], "source": "timeline\n title Product roadmap\n section Foundation\n 2024 Q1 : Prototype\n : Parser coverage\n section Launch\n 2024 Q2 : Public editor\n : SVG export", "renderUrl": "/examples/#timeline", "editorUrl": "/editor/#deflate:VZBNa8MwDIb_ilGvPjTpR1LfMkJ2GaNjsNMurqNkhsQOihxaSv_7UGBs00l6JT160R3mmMghGGA_4uADfgal2POA6kyxTY4VRduOdpLGjI59DKqJKbRWUlHzbb5Xb5kyssKRb9NK-QmjzpZmJOXigmR7_Et6sSm4r19KLuPpMninsPUc6T_p_eNZ4XWKxKBhsgMyi3nQMPNtkNSRnyepEVswWw0uhs73YO5w6cHAplkDNHRrmRd5kVegwTqHgUXKqmJ3yECD_EOE8ulUnEQYEwsVNof6WB73ciZRZ9cHbpqyqZoSNFwitUgi1bu6rgu5FVd0tWDwpF7xKv59YCTr2C8IprPDjOJ2nKxjMEwJH49v", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#timeline" }, { "id": "class-basic", "family": "class", "label": "Class", "description": "Classes with members, inheritance, and composition.", "headers": [ "classDiagram" ], "source": "classDiagram\n class Renderer {\n <>\n +render(source) string\n }\n class SVGRenderer {\n +render(source) string\n }\n class RenderPipeline {\n +run(source) string\n }\n Renderer <|-- SVGRenderer\n RenderPipeline *-- SVGRenderer : owns", "renderUrl": "/examples/#class", "editorUrl": "/editor/#deflate:jZFPa8MwDMW_ilEv--PC2q5NakIhI2S3UTboaRfXVYIhcYLsdBtdv_uQy9ZtMJhvetL7PSMdwHcDGQQFptHeF1bXpNtnJ0SsxSO6HRKSOLAmRJbprQ-kTVitTso1xZGLE-hS-EDW1dw7njFPm_vfpH_5Tqa17bGxDs_Wwf3l-4rJ3sfj77nn5voTd_VzQijRvTgPEnrdYAi8FZDgw1sTF0TW91wj7kDdSDCdq2wN6gDbGhSMyvhAQhXLaTJNpjlI0MagCyxN8mQ2n4AEjmchvVsmSxbaITAVRvNikS5uOWagSsfLjMq0zMsUJGw72iGxVMyKokg4q4vofI_OknjA1wASrAvIN7J7BFXpxiP_tu21CaACDXg8fgA", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#class" }, { "id": "er-basic", "family": "er", "label": "ER diagram", "description": "Entities, attributes, keys, and cardinality markers.", "headers": [ "erDiagram" ], "source": "erDiagram\n CUSTOMER {\n string id PK\n string email\n }\n ORDER {\n string id PK\n date created\n }\n LINE_ITEM {\n string id PK\n int quantity\n }\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains", "renderUrl": "/examples/#er", "editorUrl": "/editor/#deflate:fVFdS8MwFP0r4fY1Bbe5tctbNSsM3SZzvgmSpbcl0KY1vR2Odv9dUmTqg96HcM-B83FJD23dOY0gAJ00qnCqerWM3b88H3ab1Z71HjHWkjO2YCZjTw-_GKyUKT1z8c9uL__TZIqQaYeKMLtqHtfb1dv6sNr8rTOW2HunLBk6X3XXisMQhnX_lS1YUyqN7XebYQjDof8RI5iuLSljW-DQqBKJ_P3AoaVz6VftTNt4jJiBuOGga5ubAkQPxwIEBOk4wCEf4TSaRtMEOCit0ZKnJkk0m0-AQ2mstwziu2W09ETVkXeFYC4X8eLWx3QuV-MfBGmcJmkMHI61y9B5Ss6klJHPqkfr5ITWOLbFDwIOxhI6pcmcEESuyhZ926pRmkCQ6_By-QQ", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#er" }, { "id": "journey-basic", "family": "journey", "label": "User journey", "description": "Scored user tasks grouped by section.", "headers": [ "journey" ], "source": "journey\n title Editor adoption\n section Try\n Open editor: 5: User\n Load example: 4: User, Developer\n section Share\n Copy URL: 5: User\n Export SVG: 4: Developer", "renderUrl": "/examples/#journey", "editorUrl": "/editor/#deflate:XZBPT8MwDMW_iuVec2B_una5FbpymUBijBOXLHVHUJZEqTttmvbdUVrBgZzs915-dnLD3g9RE0r89kN0dP10AGzYEmxawz6Can1g410yetKphPc45gBeAzmgMSghl7DvKU7O1qsW6KJOwZKE5WQJqOlM1ocp9YvbfalI07UnH66wf9v-o20uwUeG3cfzyPqjoMCgLDGnF6DAnq82lTqaPqSeqEX5IFB715kjyhsejigxa8aDAruxnRfzYl6hQKU1OU7SrCoW-QwFWuMSMisf18U6CaeBExWzvF6Vq2UaM8ROjb-YNWVTNSUKPPjYUkxSvajrukiz_IiuzuRMhBe6MAo0jikqzeZMKDtle0rbnoLSjJLjQPf7Dw", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#journey" }, { "id": "architecture-basic", "family": "architecture", "label": "Architecture", "description": "Services, groups, icons, and routed connections.", "headers": [ "architecture", "architecture-beta" ], "source": "architecture-beta\n group app(cloud)[Application]\n group data(database)[Data]\n service web(server)[Web App] in app\n service api(server)[API] in app\n service db(database)[Postgres] in data\n web:R --> L:api\n api:R --> L:db", "renderUrl": "/examples/#architecture", "editorUrl": "/editor/#deflate:bZDBasMwDIZfxSiXFlxY27VJfRhkhMJgjLLLDl0PsqNkhjQxjtJulL77UA5dD_PBSJ8_ftm-QN8N0REYwOi-PJPjIdLMEuNnq1QduyEoDGHimm4op_s8hMY7ZN-1hz-hRMaJbBZ7mu4LZBxPe4on70idyU6kpjjdf5BVeQgH5VsJvtcw-JuW717-U0p7N2fX9VxH6kdRsJhnsuZdzWZP6tVg8IIw-BsqLWgI2BCzvBo09PzTSOmi74P0RCWYBw2uaytfg7mArcFAsh0XaKjGdpEu0kUOGtA5alnQPE-XqzloaHwrkUn2vEk3Ao4DSyokq2KdrR9lzBArHH8-2WbbfJuBBtvFkqKgYlkURSqzujE6P1Hro3qjbwYNvmWK6NifCEyFTU9y22NAx2A4DnS9_gI", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#architecture" }, { "id": "xychart-basic", "family": "xychart", "label": "XY chart", "description": "Bar and line series using xychart syntax.", "headers": [ "xychart", "xychart-beta" ], "source": "xychart\n title \"Weekly renders\"\n x-axis [Mon, Tue, Wed, Thu, Fri]\n y-axis \"Renders\" 0 --> 100\n bar [25, 42, 58, 74, 88]\n line [18, 35, 52, 70, 95]", "renderUrl": "/examples/#xychart", "editorUrl": "/editor/#deflate:NVBNj4JADP0rTb3WBFBk5LAJG8Jt97Ax8SAexqHqZHEww2Agxv--KWZ76vtoX9Mn9t3gDWOO42Su2ofaAQQbWoYa98y_7QSeXcO-r1G0calH28Phq3MEu4EJ9twQ7K4DQeXtUTzT21Pjz_8kRLBcfkAcRaKftIdDkhKsE4JUEWRrAqXm2dY6hkOsCFYpQZoQZBHBNj0i4V23HIIci4R9mFppjbf9XTBzg3lEaDp3thfMn3i6YI6Lai4kPM8wyZIsKZBQG8MuCBUX2SqNkVDChVCf22wrxG0IshUXablRm7XEDP6s54ctKlUVlULCU-cb9kKVq7IsM8nq5tXFg5318M1jQELrAnttgn0w5sEPLMfe7tqEN3y9_gA", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#xychart" }, { "id": "pie-basic", "family": "pie", "label": "Pie chart", "description": "Proportional slices with values shown in the legend.", "headers": [ "pie" ], "source": "pie showData\n title Export requests by format\n \"SVG\" : 42\n \"PNG\" : 28\n \"ASCII\" : 18\n \"Unicode\" : 12", "renderUrl": "/examples/#pie", "editorUrl": "/editor/#deflate:LZBNb8IwDIb_SvT2msMoHy25lXWduKBJaDtxCcFlkUrSJS4DIf77lHY--Xlkvbb8QPRDMASF3pKI3_631qwPTgi23JF4u_U-sAj0M1DkKI530fpw0ZxGDth_vR8glFjkE3_sJs7Liav963Y7mtm_-XTW-BNNLodErztiThdAIvK9S60JNvaJiU5QLxLGu9aeoR44nqGQNWNBoh0xL_IiryChjSHHSc2qYr6cQaKzLkVm5WZdrJO4DJxSkS3rVblapDVDaPX4hawpm6opIXH04UQhqXpe13WRdvkxurqSs0Hs6MaQsI4paMP2SlCt7iKlay-9NgzFYaDn8w8", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#pie" }, { "id": "quadrant-basic", "family": "quadrant", "label": "Quadrant chart", "description": "Two-axis priority map with labeled regions and points.", "headers": [ "quadrantChart" ], "source": "quadrantChart\n title Feature priorities\n x-axis Low impact --> High impact\n y-axis Low effort --> High effort\n quadrant-1 Plan carefully\n quadrant-2 Big bets\n quadrant-3 Defer\n quadrant-4 Quick wins\n SVG export: [0.78, 0.28]\n MCP setup: [0.62, 0.72]\n Palette polish: [0.35, 0.24]", "renderUrl": "/examples/#quadrant", "editorUrl": "/editor/#deflate:VZHNbtswEIRfZbG-0oEt_0jRoYATQe0hCRwU6KXNgaZX9qIMqZLLxEaQdy_ItGjNE2e-4SyBfcPoUzCELf5Keh-0k9ujDvLDAQiLJehJSwoEY2AfWJhiZqepPnGEO_8K_DxqIzCdfoIvfDj-0Tl0_heiYfDhv9CHzqG_Y6dz2FrtwOhAQ7L2fAEruOED7Ejihb2AjgYKF94SHhObn_DKroS_fvsMdBp9kBa-z67qRsHsqmqeMru_3UIkSWNB6yqjuipoqy2JEIzecjwWvliVp8snVDh-YGwRFUY523w1geOYNdEe25lC493AB2zfcHfAFid9OahwKLKqq7raoEJtDDnJ1nxTL1ZzVGjZ5cpJc3NdX2fjOUluxcmqWzfrZR6TwqDL7iZ902_6BhXufNhTyFa36LquzrN8qd68kOMAD3QSVMhOKGgj_ELYDtpGyr8tq8NWQqL3998", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#quadrant" }, { "id": "gantt-basic", "family": "gantt", "label": "Gantt chart", "description": "Sections, dependencies, status tags, and a milestone.", "headers": [ "gantt" ], "source": "gantt\n title Release train\n dateFormat YYYY-MM-DD\n excludes weekends\n section Build\n Completed task :done, des1, 2024-01-08, 2024-01-10\n Active task :active, des2, 2024-01-11, 3d\n Future task :des3, after des2, 5d\n section Ship\n Crit review :crit, rev1, after des3, 2d\n Release :milestone, m1, after rev1, 0d", "renderUrl": "/examples/#gantt", "editorUrl": "/editor/#deflate:TZFNT8MwDIb_iuVdM6kfGy25FarexgFOk7iExB0RaVol7gAh_jtKV2A-2W_y-HXiL4zjHDShxJPyzM8egC07gkdypCIBB2V9ko1i6sYwKIbj8XjcHg7btk0H9KHdbCjCO9EbeROTGEmzHT3czdaZJADcj8PkiMkAq_gG0oyeBBiKuYAiK3bbLN9m9X-eZxeu0WzPdIEAQKqlXsji6nYuoFydupnncEUYiqUA1TOFldqb6yGfXu20zhgsQ6CzpfeF1MGySEJ-xZcCitXp95fWkIN1FHl52PCHXPDMoMBJOWJO340CI3-6lOpg45RqIoMyE6hH39sTyi98OaHETbcECuyXsqiKqmhQoNKaPCcpb6pyn6NAZ31quanvbqvbJAwzp6642bc39c0u2cyhV8vKN13dNV2NAl_GYCgkqS3btq2S17i0bs7kbYAH-mAUaD1TuCwAZa9cpDTtMCnNKDnM9P39Aw", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#gantt" }, { "id": "mindmap-basic", "family": "mindmap", "label": "Mindmap", "description": "A centered, bilateral hierarchy with shapes, Markdown, Unicode, accessibility, and deep quality branches.", "headers": [ "mindmap" ], "source": "mindmap\n root((Agent-native release))\n discovery[Discovery]\n ::icon(fa fa-book)\n :::urgent large\n evidence[\"`**Evidence** across\ninterviews, benchmarks, and Unicode naïve café`\"]\n constraints{{Constraints}}\n Security\n Determinism\n delivery(Delivery)\n beta))Beta signal((\n launch)Launch cloud(\n quality[Quality gates]\n Parser round-trip\n SVG identity\n Terminal width\n Ecosystem\n Mermaid parity\n Terminal tools", "renderUrl": "/examples/#mindmap", "editorUrl": "/editor/#deflate:VVLbbtswDP0VgnmxAwdY07VJ_ZbOzV62YcMuL8mAMjLtCJWlTKLdBUE-aE_7iP7YIOfW6YXkORJ5jsAdBtd6xZhjo23Z0GZpAbxzkiSzmq2MLInuGDwbpsBpGnmAUgflOvbbRXHKfh4YgDzXytmkIqhotHLuKb0weetjVzDkaz7B3OmSreLFEh-Hw4djNRwCKe9CWFpthX2n-TlksGKr1g35p5AB2RK-W61cyWDp5W_HoKh6-fO4xLMa5WwQT9pK2O3eXYr9_nQD4Cur1mvZXpCChX2jrQ7N0TAbHV0mxTE5m1qxUJresxAEXVsySXKiDLVWrdMPfQBlXFueuV8tGS3bxZdDhJqEw1k1wGfygT1419pyJF5vXsn98R7iH8l_kr_1gsnAsy5lfcAflAvbIHw0AfCRfUO6hA299nt-Ks6ZgBluyLBI3ArMMMjWxFR5HTaxZi4xf5OhcrbSNeY7XNWY42DeH8yw6svxZDwZzzBDUoqtROhqNrm-ucIMjbax5WB6fze5i0DTSuyKg5vidnr7No5pfUX9Zg7m0_lsPsUMV86X7CNUXBdFMYmzXN961rHVHj7xb8EM-4UhFTcX84pM4Ki22ZASzMW3vN__Aw", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#mindmap" }, { "id": "gitgraph-basic", "family": "gitgraph", "label": "GitGraph", "description": "Ordered branches, commit types, tags, a semantic merge, and a merge-parent backport.", "headers": [ "gitGraph" ], "source": "---\ntitle: Release train with backport\nconfig:\n gitGraph:\n mainBranchName: main\n mainBranchOrder: 0\n showBranches: true\n showCommitLabel: true\n rotateCommitLabel: true\n---\ngitGraph LR:\n accTitle: Release history with feature merge and backport\n accDescr: Develop and release branches diverge, main merges develop, and release cherry-picks the merge\n commit id:\"ROOT\" tag:\"v1.0.0\" msg:\"Foundation\"\n branch develop order:2\n commit id:\"API\" type:HIGHLIGHT tag:\"beta\" msg:\"Build API\"\n branch release order:3\n commit id:\"RC\" type:REVERSE tag:\"rc.1\" msg:\"Cut release candidate\"\n checkout develop\n commit id:\"UI\" msg:\"Finish interface\"\n checkout main\n commit id:\"HOTFIX\" type:REVERSE msg:\"Patch production\"\n merge develop id:\"MERGE\" tag:\"v2.0.0\" type:HIGHLIGHT\n checkout release\n cherry-pick id:\"MERGE\" parent:\"UI\" tag:\"backport\"\n commit id:\"PATCH\" msg:\"Verify release\"", "renderUrl": "/examples/#gitgraph", "editorUrl": "/editor/#deflate:bZNNb-IwEIb_ijW9hgrotlDfKOFL6paKZas95GKcgVhN7Mie0EVV_3tlJ-FrlxMzzjzzvjP2JzhTWYnAodPpJJoU5cjZCnMUDhlZoTT7UJSxjZDvpbGUaGn0Vu14ohnbKZpZUWYhYKwQSj9ZoWX2IgrkIb4-WdoULWfdOu8y81Hn0XFGtsJTfmyKQtGz2GB-fmQNCcL_HAYDrSL2vAqihJTrS0-ZcmTsoXa1RUGVRVag3SETOj3zGYpjdNJyFuMec1OGL2wD2jS6War2vjwKLmuUY2ldEV2UyAytPXRKJd8do6zp61vJ4IeplCewWi7XCTASO57Avnfbve0mwArnw6mpdCpIGZ2Ar6tFtN2YCdPtXxNHrwsPPJTI54vZ_Hkxm68b_gZJHOlPlcpTFr4-g7fqa_jdP3LHLXs1eZusfk0aspW3vSN5XNFpCkKnKhWEdReZoXw3FbUmrvm_Fyf3SiuXMaUJ7VbIa0B7386r58v1dPHnWmGNexUkM1Zak1byNNL6LrQTDZCfk9VsclpJv1nJ5UAvpDRem1y79EtaKSxqah0262ivH1wbeR2tx_PjJN7Qqu3h2AYgglLkSOSfMkTg6JD7v9IqV_oYMQXejaB-vcA_YbMDDjfT8IMItiHsD_qD_ggiEFKiJp_qjQZ39z2IIFfaI2-GT4-DR58oKvJUuLmPH4YPP3ybKuwlgIfT0XQIEWzCvfGp-C6O44HvZQJ6tEetLHvBvwQRhK0KSWqPwLcid-jVFqWQBNw_8a-vbw", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#gitgraph" }, { "id": "radar-basic", "family": "radar", "label": "Radar chart", "description": "Multivariate profiles compared across shared axes — the silhouette is the message.", "headers": [ "radar-beta" ], "source": "radar-beta\n title Model comparison\n axis speed[\"Speed\"], accuracy[\"Accuracy\"], cost[\"Cost\"]\n axis latency[\"Latency\"], context[\"Context\"], safety[\"Safety\"]\n curve a[\"Model A\"]{4, 5, 3, 4, 4, 5}\n curve b[\"Model B\"]{5, 3, 4, 3, 5, 3}\n graticule polygon\n max 5", "renderUrl": "/examples/#radar", "editorUrl": "/editor/#deflate:RZFPj8IgEMW_ChmvbLJaa7W3uk1Pu3vxaD2MdNqQIDQwNRrjd99AjUtIeDx-vOHPA4KbvCIowWOH_uNMjK0VgjUbEj-uIyOUu4zodXA2ruBNBxFGou7YwiGOLZykQKUmj-p-bKF6yeQrF_jYwpcL3MLpHWCQySb6e1Yv2DLdZj6p5AbsiSN6SOIVoyZ_JYHHFuZTVi2cHmspcikyKdap589_8vwm95F8Y9m85RnJwSNrNRkSozP3Yb7wBW8iBwkjGmKOTwUSAt9NlMrrMMY5UQflpwTlbK8HKB9wHqCERZMaSOjTdFWsilUFElApshytZVVk-RIkGG1j5GK73xW7aFwmjqmwyOvNdrOOZSbfY_quRbNtqmYLEs7Od-SjVWd1XRexlkvR1ZWs9uKXbgwStGXyqFhfCcoeTaB42suIiqFkP9Hz-Qc", "outputs": [ "svg", "ascii", "unicode", "png", "layout" ], "docs": "/examples/#radar" } ], "richExamples": [ { "id": "rich-agentic-mermaid", "category": "Hero", "title": "Agentic Mermaid", "description": "Mermaid rendering, made beautiful.", "source": "stateDiagram-v2\n direction LR\n [*] --> Input\n Input --> Parse: DSL\n Parse --> Layout: AST\n Layout --> SVG: Vector\n Layout --> ASCII: Text\n SVG --> Theme\n ASCII --> Theme\n Theme --> Output\n Output --> [*]", "options": {}, "renderUrl": "/examples/corpus/#rich-agentic-mermaid", "editorUrl": "/editor/#deflate:ZY_BisIwEIZfZZijtCB7zEEoClIouGxKL-ohxNEN2KYkE7GI7y6dLHvQ2_9_38DMPDD6FCyhwsiGaePMJZi-vH0dBgCAkwtk2fkBmp9M9osjlOUK6mFMnJFEgd8mRFKw0U020sU0ZvKJFVS6zSoDcbrbKujIsg8frtLrulbQ0v1vme62Itpf6ikjmXmHEgXuEv-fmrPg_eKIBY7mSszz_1hg5Ok6RxtcHOdOdEK1LND64ewuqB5ofT8ay6g4JHo-Xw" }, { "id": "rich-simple-flow", "category": "Flowchart", "title": "Simple Flow", "description": "Basic linear flow with three nodes connected by solid arrows.", "source": "graph TD\n A[Start] --> B[Process] --> C[End]", "options": {}, "renderUrl": "/examples/corpus/#rich-simple-flow", "editorUrl": "/editor/#deflate:Jcu7CsMwDEbhVxH_7EBnD4Xe9kK7ORmMoqaB1DayMpSQdy-m2_mGs6HmVVngMWksb3pe-0R0Cg-LagN13ZHO4a6ZpdY_L-GWxgEOJS5i1lY4VPsuLVnnWppFRviDA-f0mif4DZw_JbLBm66y7z8" }, { "id": "rich-fan-in-grouping", "category": "Flowchart", "title": "Fan-in Grouping", "description": "Roots feeding the same target sit contiguously and each target aligns under its own group, so the two fan-in trunks stay separate (most visible in the ASCII panel).", "source": "graph TD\n A1[Ingest A] --> A[Queue A]\n A2[Ingest B] --> A\n B1[Stream A] --> B[Queue B]\n B2[Stream B] --> B\n A --> C[Merge]\n B --> C", "options": {}, "renderUrl": "/examples/corpus/#rich-fan-in-grouping", "editorUrl": "/editor/#deflate:NY67DsIwDEV_xfLcSpQxA1ICCwMDgi10iIIJlfqIEmdAVf8dJW2363t8LM8YpxQsoUAXjP_C8_IaAWSjr6OjyCBbqOsTSH1PlAhkW_Bxx2rDuVWNfnAgM-yS2iRVJHXc8SapcqrEs75RcLTurQ1W6E1PzPk3rDDyr8_Rhi76PBO9URwqtNP46RyKGe00eGMZBYdEy_IH" }, { "id": "rich-labeled-fan-out", "category": "Flowchart", "title": "Labeled Fan-out", "description": "Sibling edges with labels share a trunk and the box-start connector sits flush on the source border even when a label widens a column (most visible in the ASCII panel).", "source": "flowchart LR\n Dispatcher -->|email| E[Email Worker]\n Dispatcher -->|sms| S[SMS Worker]\n Dispatcher -->|push| P[Push Worker]", "options": {}, "renderUrl": "/examples/corpus/#rich-labeled-fan-out", "editorUrl": "/editor/#deflate:fc4xC8IwEIbhv3Lc3IJzBie7KRQ7OFSHEK8mmDYhd0Gk6X-XDG7i9n7wDN-KHHIyhAonH17G6iRwPF8XgIPjqMVYStC2-0Kzdr5AN3Y14BLSk9LtB-SZCwzjcBr-oJjZFujHPrP9Mmwwak8i9Q02yPL2NU1yHOsmuqPaNWjCMrkHqhVNmKM2gkpSpm37AA" }, { "id": "rich-subgraph-direction-override", "category": "Flowchart", "title": "Subgraph Direction Override", "description": "direction LR inside a TD flowchart lays the inner pipeline out horizontally — honored even though Mermaid itself ignores it in many cases (mermaid#2509).", "source": "flowchart TD\n subgraph Pipeline\n direction LR\n Fetch --> Parse --> Transform --> Store\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-subgraph-direction-override", "editorUrl": "/editor/#deflate:JY2xCsMwDAV_RWhOoLOHTqVTh9Bm7OIqSmJwLCMrhBLy78XpdnfweDsWWZUYHY5RNpq9GvS3dwIo62dSn2foQuYYEtcIMARlsiAJHs9_ubPRDG17hc5r4ZN69amMostpLxM955wGbDD7yGb1Exss9o0VSUPJ1ZkHdJcGSdIYJnQ7kizZk6EzXfk4fg" }, { "id": "rich-original-node-shapes", "category": "Flowchart", "title": "Original Node Shapes", "description": "Rectangle, rounded, diamond, stadium, and circle.", "source": "graph LR\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))", "options": {}, "renderUrl": "/examples/corpus/#rich-original-node-shapes", "editorUrl": "/editor/#deflate:Hc0xC4MwEAXgvxJuiqDQOUOhardOOlqHcLnaQExCvAxF_O8l2e5978GdcISckEDBlnT8itf09kI8lomQtd8craLr7qKXU8jekGlK3VcbztHqPXhzFRuqjXKZWRub97Uux6pPKQeb0FHTQAtRO2IuL6GFg3-unJjsEUsmMqBuLWDwH7uBOgHDHjUyKE6ZrusP" }, { "id": "rich-batch-1-shapes", "category": "Flowchart", "title": "Batch 1 Shapes", "description": "Subroutine `[[text]]`, double circle `(((text)))`, and hexagon `{{text}}`.", "source": "graph LR\n A[[Subroutine]] --> B(((Double Circle)))\n B --> C{{Hexagon}}", "options": {}, "renderUrl": "/examples/corpus/#rich-batch-1-shapes", "editorUrl": "/editor/#deflate:HYy9CsIwFEZf5XKnBlJwziDYOjg41bF2SOM1BmIS8gNKyLtL3L7DOXwVky9REQrUUYYXXJe7Azit663s0ZdsHG0bjOMRpmEYzr7slmA2UVlijPV2-tu51gt9pPauNeQYpKWc-y1yTPlr-1TRpNCZ6IHiwFF59zQaRUXl30GqjCLHQq39AA" }, { "id": "rich-batch-2-shapes", "category": "Flowchart", "title": "Batch 2 Shapes", "description": "Cylinder `[(text)]`, asymmetric `>text]`, trapezoid `[/text\\]`, and inverse trapezoid `[\\text/]`.", "source": "graph LR\n A[(Database)] --> B>Flag Shape]\n B --> C[/Wider Bottom\\]\n C --> D[\\Wider Top/]", "options": {}, "renderUrl": "/examples/corpus/#rich-batch-2-shapes", "editorUrl": "/editor/#deflate:JY2xCoNAEER_ZdkqAcXUVwhRSWWVBFJ4Fptzo4J6x91aBPHfw5lu3ryB2TDY1RtGhb0nN0B91wvAtTlVJPSmwOcW0jSHIr9N1MNjIMdtnBRHXTbZa-zYQ2FF7Kz14crDVY3Wf_m0LmsxQUcTi8QzTDDId4rR-DG4yMwdqkuCxi6fsUe1obGzIyOoxK-87z8" }, { "id": "rich-all-12-flowchart-shapes", "category": "Flowchart", "title": "All 12 Flowchart Shapes", "description": "Every supported flowchart shape in a single diagram.", "source": "graph LR\n A[Rectangle] --> B(Rounded)\n B --> C{Diamond}\n C --> D([Stadium])\n D --> E((Circle))\n E --> F[[Subroutine]]\n F --> G(((Double Circle)))\n G --> H{{Hexagon}}\n H --> I[(Database)]\n I --> J>Flag]\n J --> K[/Trapezoid\\]\n K --> L[\\Inverse Trap/]", "options": {}, "renderUrl": "/examples/corpus/#rich-all-12-flowchart-shapes", "editorUrl": "/editor/#deflate:NdBBb4MgFMDxr0I4YWLTnT00WbVW257sbugB4dWRIBiEZZvxuy-8ZDf4_R-QsNHVRS-BFnTyYvkkj663hLzzDmQQdjIwkMPhRM6sc9EqUFnKZ7Ryq7SYnVV7shKtYvwZhNJxHnCyQr0wVmovDWSIF8Sa82ccvYtBWxiGFGoMV8ZY5eJogPyfwmNXrM22NfAtJmd3fLdBbTmrRBCjWCHDq1rk26k2YkK4Idz58cOLBX6dVn2P4Y7hwfu-tV_gVyBp4jjQnC7CQAjpc2hO1_Bj0lJ6vS5pD6Bo8ZZT6exLT7TYqHTzImSgRfAR9v0P" }, { "id": "rich-all-edge-styles", "category": "Flowchart", "title": "All Edge Styles", "description": "Solid, dotted, and thick arrows with labels.", "source": "graph TD\n A[Source] -->|solid| B[Target 1]\n A -.->|dotted| C[Target 2]\n A ==>|thick| D[Target 3]", "options": {}, "renderUrl": "/examples/corpus/#rich-all-edge-styles", "editorUrl": "/editor/#deflate:NY3NCoMwEIRfZdmzKf25BRTa-gb1ZnMIyVZDrQnJeijGdy9Kvc0338DMmPwUDaHELurQQ1M_R4Br-9hqBUJUOfnB2Qy3ttGxI4aT2jYgDqLK1jOTzXDf7flvy7LK3DvzzlDv7qKwwKAHYl4vscDE32GNJroUViayKI8FGj--XIdyRuM_QRtGyXGiZfkB" }, { "id": "rich-no-arrow-edges", "category": "Flowchart", "title": "No-Arrow Edges", "description": "Lines without arrowheads: solid `---`, dotted `-.-`, thick `===`.", "source": "graph TD\n A[Node 1] ---|related| B[Node 2]\n B -.- C[Node 3]\n C === D[Node 4]", "options": {}, "renderUrl": "/examples/corpus/#rich-no-arrow-edges", "editorUrl": "/editor/#deflate:Jcw7DsMgEATQq6y2NlF-FRJFbNeu0iUUCDaOJWIQrIvI9t0jQjfzNJoVc1iSJZQ4JhPfcO-fM8DtMQRHcNIghNgSecPkNmgrn3XZtCAOArpKlz91oJSCvtJVY4PReGIu99hg5q8v0aYpx9KJHMpjgzbMr2lEuaINn2gso-S00L7_AA" }, { "id": "rich-text-embedded-labels", "category": "Flowchart", "title": "Text-Embedded Labels", "description": "Using `-- label -->` syntax instead of `-->|label|` for edge labels.", "source": "flowchart TD\n A(Start) --> B{Is it sunny?}\n B -- Yes --> C[Go to the park]\n B -- No --> D[Stay indoors]\n C --> E[Finish]\n D --> E", "options": {}, "renderUrl": "/examples/corpus/#rich-text-embedded-labels", "editorUrl": "/editor/#deflate:PY6xCsIwFEV_5fEmhQacMyi2VXFxqYtUh5CmNljzSvKKlNJ_l0Rwu_eeM9wZA41eG5TY9vTRnfIM1_LuAParipXnNQixhXw-B7AMYXRu2i2R5yAE3ExIvKhPBEzAnYFB-dfjb1woCWVdsZrAuobIh4SLBA710TobujSVvwkzHFRvmOMvzDDw1MeovQ1D7MY0KDcZanKtfaKcUdN7UJpRsh_NsnwB" }, { "id": "rich-bidirectional-arrows", "category": "Flowchart", "title": "Bidirectional Arrows", "description": "Arrows in both directions: `<-->`, `<-.->`, `<==>`.", "source": "graph LR\n A[Client] <-->|sync| B[Server]\n B <-.->|heartbeat| C[Monitor]\n C <==>|data| D[Storage]", "options": {}, "renderUrl": "/examples/corpus/#rich-bidirectional-arrows", "editorUrl": "/editor/#deflate:JY2xCoMwFAB_5fFmUzoHFaod26WOqUMaXzVgk5A8C2L89yLd7uDgNkx-iYZQ4hh1mOD2eDqAi2pnS457KIWoc1qdydCojuKXYn8UDZTiJOo8kY78Is0ZWnX3zrL_By2UVVXnQbPOcFUd-6hH6rHAoGdiPpZYYOJ1PtBEm8LhRAPKc4HGu7cdUW5o_Cdowyg5LrTvPw" }, { "id": "rich-parallel-links", "category": "Flowchart", "title": "Parallel Links (&)", "description": "Using `&` to create multiple edges from/to groups of nodes.", "source": "graph TD\n A[Input] & B[Config] --> C[Processor]\n C --> D[Output] & E[Log]", "options": {}, "renderUrl": "/examples/corpus/#rich-parallel-links", "editorUrl": "/editor/#deflate:LYwxC8IwEEb_ynGDUwrOGQRtHQShDm4xQzhjLNRcSC6DlP53SXH73sfjLVi4ZvKoMWSX3nAfHhHgaC4xVbGwg5PpOb6mYKHrDtCbW2bypXC2Tey3dzBjlb9_NlcOFhUmN3uRVkaFRb5zm5Snkhp7_0S9V0hbHPWCxJ_kSFBLrn5dfw" }, { "id": "rich-chained-edges", "category": "Flowchart", "title": "Chained Edges", "description": "A long chain of nodes demonstrating edge chaining syntax.", "source": "graph LR\n A[Step 1] --> B[Step 2] --> C[Step 3] --> D[Step 4] --> E[Step 5]", "options": {}, "renderUrl": "/examples/corpus/#rich-chained-edges", "editorUrl": "/editor/#deflate:Jcy9CsIwFIbhWzl8cwpqdckg-Ld10lE7hHishbYJyekgpfcu4Wzvs7wLcpiTZ1h0ycUvNffXRHR6PoQjbVuqqiOdVTvVRVWrrqq96qY6tDCIbmCRcoZBlt9Q0qc-x2LmN-zGwIfp03ewC3wYo_MCK2nmdf0D" }, { "id": "rich-linkstyle-color-coded-edges", "category": "Flowchart", "title": "linkStyle: Color-Coded Edges", "description": "Using `linkStyle` to color specific edges by index (0-based).", "source": "graph TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Accept]\n B -->|No| D[Reject]\n C --> E[Done]\n D --> E\n linkStyle 0 stroke:#7aa2f7,stroke-width:3px\n linkStyle 1 stroke:#9ece6a,stroke-width:2px\n linkStyle 2 stroke:#f7768e,stroke-width:2px\n linkStyle default stroke:#565f89", "options": {}, "renderUrl": "/examples/corpus/#rich-linkstyle-color-coded-edges", "editorUrl": "/editor/#deflate:hZCxTsMwEIZfxTrWRCpBTVoPldqalYGyoNDBcs6tabAt-yJASd4duZGCysJ2_3ff3fD3EF0XFAKHU5D-zF7Em2VsWx9IBjqyPN-wXS9QmWicHdNul-DwinFg-3qrFHo6_vInNzBRP-M7qgnvrz8ea-EsXoGYQBpbYy8H-m6RLVik4C7I7yopC11lU8w_TUNn_uC_bvX7WV-jwlLe6sVfvZh1XVXlCv_RG9Sya2k-WpZLvVpDBl62SJTKggxicoGDCib6lBEb4IsMlLPanID3oNyHl4qAU-hwHH8A" }, { "id": "rich-linkstyle-default-override", "category": "Flowchart", "title": "linkStyle: Default + Override", "description": "Default edge style with index-specific overrides for critical paths.", "source": "graph LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]\n B --> E[Reject]\n linkStyle default stroke:#6b7280,stroke-width:1px\n linkStyle 0,1,2 stroke:#22c55e,stroke-width:2px\n linkStyle 3 stroke:#ef4444,stroke-width:3px", "options": {}, "renderUrl": "/examples/corpus/#rich-linkstyle-default-override", "editorUrl": "/editor/#deflate:XZAxb8IwEEb_inWsjhRMoMgDEtBuHaowugzBuZCUNHZ9Z5UK8d-rBAkRxu_de8tdgFwMFkHDMRS-Fu_5ZyfE2uT4E5F4L5JkJTZmHbne95fNALbmIziLRAPbDuzV5EjedYQP4pvJ8QstD6htutOO_1oUJVZFbFkQB3dCPVkcXtQylbeZ_DYl13rqz-MolVOp7olSdj7HcaKek9ldxyrLsmysz_wZJPiiReb-AyCB-gw02NCQ7zdiCTqVYF1XNUfQF7Du2xeWQXOIeL3-Aw" }, { "id": "rich-direction-left-right-lr", "category": "Flowchart", "title": "Direction: Left-Right (LR)", "description": "Horizontal layout flowing left to right.", "source": "graph LR\n A[Input] --> B[Transform] --> C[Output]", "options": {}, "renderUrl": "/examples/corpus/#rich-direction-left-right-lr", "editorUrl": "/editor/#deflate:JYuxCsIwFEV_Jdw5BecMgjoJgiBuaYfwfK2FNgkvL4OU_nsJbvecw91QUhViOEwS8tc8Xn005uLvMVcdTNedzdW_JcQyJln_4uafVVuGRQ4Lq7Y_LIr-ljZJ5pIbM3_gThaU4jhPcBsorTmQwqlU3vcD" }, { "id": "rich-direction-bottom-top-bt", "category": "Flowchart", "title": "Direction: Bottom-Top (BT)", "description": "Vertical layout flowing from bottom to top.", "source": "graph BT\n A[Foundation] --> B[Layer 2] --> C[Top]", "options": {}, "renderUrl": "/examples/corpus/#rich-direction-bottom-top-bt", "editorUrl": "/editor/#deflate:JcuxCsIwFEbhV7n8cwrimEGwgpNjt7ZDSK81UHNDcjOU0neX4Ha-4RwoUrNnWKzZpQ_1wxSJ7uNTalycBokzdd2N-vHlds50_fMxDpJmGCS3sWr7YVB031r6HEpqZl5gLwZe4jussAe8fJPzCqu58nn-AA" }, { "id": "rich-subgraphs", "category": "Flowchart", "title": "Subgraphs", "description": "Grouped nodes inside labeled subgraph containers.", "source": "graph TD\n subgraph Frontend\n A[React App] --> B[State Manager]\n end\n subgraph Backend\n C[API Server] --> D[Database]\n end\n B --> C", "options": {}, "renderUrl": "/examples/corpus/#rich-subgraphs", "editorUrl": "/editor/#deflate:TY7NCsIwEIRfZdlzC557EPqD4EEQ6y162KZrLdYkJFtBSt9dYqV429mZ-ZgJgx29Zsyw8-TucK4uBiCMzSJ33hph08YnQK5OTFogd-4KabqFQtVCwnAgQx37a4z90iuiIP1YCaXKj3uo2b_YL4hKVSTUUOD_dvH1SkzQ0cAicSAmGOQ9xFP7PriomVvMNglqa259h9mE2j4dacFM_Mjz_AE" }, { "id": "rich-nested-subgraphs", "category": "Flowchart", "title": "Nested Subgraphs", "description": "Subgraphs inside subgraphs for hierarchical grouping.", "source": "graph TD\n subgraph Cloud\n subgraph us-east [US East Region]\n A[Web Server] --> B[App Server]\n end\n subgraph us-west [US West Region]\n C[Web Server] --> D[App Server]\n end\n end\n E[Load Balancer] --> A\n E --> C", "options": {}, "renderUrl": "/examples/corpus/#rich-nested-subgraphs", "editorUrl": "/editor/#deflate:dZA5C4NAEIX_yjC1QmqLgFeXKgcWxmJdJ0Ywu8seCUH872E9IOSo5r03b75iBjTSaU4YYauZusIxOwsA4-rZpr10jU_eMmdCYsZCeTpA7sWe2k6Kaq4BxGVBNRxI30lXEIZbSMpYqTWZayR-YB-0YAsvPrDpFzb7i11GXu4kayBhPRN8vYqnzSRTDFCxnqz1D8AAjX32XnLdGeU9UYPRJkAuxaVrMRqQy5ti3GJktaNxfAE" }, { "id": "rich-subgraph-direction-override-connected", "category": "Flowchart", "title": "Subgraph Direction Override", "description": "Using `direction LR` inside a subgraph while the outer graph flows TD.", "source": "graph TD\n subgraph pipeline [Processing Pipeline]\n direction LR\n A[Input] --> B[Parse] --> C[Transform] --> D[Output]\n end\n E[Source] --> A\n D --> F[Sink]", "options": {}, "renderUrl": "/examples/corpus/#rich-subgraph-direction-override-connected", "editorUrl": "/editor/#deflate:LY7BCsIwEER_ZdlzBc89CGoVBMGivcUeYrrWYN2ETXKQ4r9LjKed95iFmTG4JIawxlG0f0DXXBkgpFtBbz1NlglUK85QCJZHaP-yz1WAwQqZaB3D8VzMWh3Yp9jDYrGCjWq1BCqwVZ1oDncnryIadUoxd_Mn8ZDPTl1-o0pjnVXzi3t1sfzssUKvJ4oxz8YKQ3xPORqxwWcmGrBeVmgc3-2I9YzGvbw2EesoiT6fLw" }, { "id": "rich-class-shorthand", "category": "Flowchart", "title": "::: Class Shorthand", "description": "Assigning classes with `:::` syntax directly on node definitions.", "source": "graph TD\n A[Normal]:::default --> B[Highlighted]:::highlight --> C[Error]:::error\n classDef default fill:#f4f4f5,stroke:#a1a1aa\n classDef highlight fill:#fbbf24,stroke:#d97706\n classDef error fill:#ef4444,stroke:#dc2626", "options": {}, "renderUrl": "/examples/corpus/#rich-class-shorthand", "editorUrl": "/editor/#deflate:VY_BbsIwEER_xVquQYLIDeoekNpSqaeeuKU9LM5uYtXgaO0cEOLfKyNo4TajeTOrPUGKkzoGhF5pHMx283Uw5qX9jLqn8I2IHQtNIZv5fG1e2w_fD8H3Q-auhMPNXuK39l01agm4iDLlAqW0YTG3HfEh4EysWHmqUtb4wzijJS2JHvj_6Wtjt5Pa_jW659Vq0Tw0LjevNIu19o52dVM3UMFIgXMu_0IFKR9DkU59Gotn7gAXFbh4EN8DnsDF_UguA2ad-Hz-BQ" }, { "id": "rich-inline-style-overrides", "category": "Flowchart", "title": "Inline Style Overrides", "description": "Using `style` statements to override node fill and stroke colors.", "source": "graph TD\n A[Default] --> B[Custom Colors] --> C[Another Custom]\n style B fill:#3b82f6,stroke:#1d4ed8,color:#ffffff\n style C fill:#10b981,stroke:#059669", "options": {}, "renderUrl": "/examples/corpus/#rich-inline-style-overrides", "editorUrl": "/editor/#deflate:Rc7LDoJADAXQX2nKdkjAB4FZmPD4BHfIAoeOEAeGzJSFMf67AY1219ucmz7R28UpQok31849nKvLBJDXFel2MdxAGJ6gqMvFsx2htMY6_wnLOp8s9-Tgc2xW6PlhCArQgzEy2F_TnU6EZ2fvJIO4O1CXCrWWyEBv80flF8XRNUvjH4qOWZJkKHBuDTGvn6LAjaBE5QY_rztRhzISqOykhxvKJyo7zq1ilOwWer3e" }, { "id": "rich-ci-cd-pipeline", "category": "Flowchart", "title": "CI/CD Pipeline", "description": "A realistic CI/CD pipeline with decision points, feedback loops, and deployment stages.", "source": "graph TD\n subgraph ci [CI Pipeline]\n A[Push Code] --> B{Tests Pass?}\n B -->|Yes| C[Build Image]\n B -->|No| D[Fix & Retry]\n D -.-> A\n end\n C --> E([Deploy Staging])\n E --> F{QA Approved?}\n F -->|Yes| G((Production))\n F -->|No| D", "options": {}, "renderUrl": "/examples/corpus/#rich-ci-cd-pipeline", "editorUrl": "/editor/#deflate:RZBNa8MwDIb_itBhpJCMnXPoyEczehnZ1svIenBtLTWktvHHWEjy34eTjZ2kl0fS-6IJnQ6WE-bYW2aucKo_FIALl01yCV11hFYaGqSic4QARdcGd4VKCzpDlu2hnE7kvIOWOfe4bENlJPM7uRmqrgxyEHC8sf7vxoaf9Qx118hvuINX8nb8pTVk99keiqhIiViq1emQdDWZQY_w5lkvVX_eRXhYYTO9FFAYY_UXiS1H85_iKUlaq0XgXmq1W9c2uobAFA0byPv4C0zR-XGILbfSmaiJBOYPKXKtPmWP-YRc3wzjHnNvAy3LDw" }, { "id": "rich-system-architecture", "category": "Flowchart", "title": "System Architecture", "description": "A microservices architecture with multiple services and data stores.", "source": "graph LR\n subgraph clients [Client Layer]\n A([Web App]) --> B[API Gateway]\n C([Mobile App]) --> B\n end\n subgraph services [Service Layer]\n B --> D[Auth Service]\n B --> E[User Service]\n B --> F[Order Service]\n end\n subgraph data [Data Layer]\n D --> G[(Auth DB)]\n E --> H[(User DB)]\n F --> I[(Order DB)]\n F --> J([Message Queue])\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-system-architecture", "editorUrl": "/editor/#deflate:bZFLa8MwEIT_yqKTDA707EPBjpM0JaEvSg9bH2R56xhcW-jRYkL-e5FsaGxyEbMzo_0EOjPTOy2JJazWQp3g8PrZARhXjqNsG-qsAVwHAQcxkC58BSDl-EElpEoVEaxW95Bh-ryHnbD0K4aptOZ47Mumpeuej6irZiRD-qeRZADfRjVjZeFijqmzJ5gKs2iD74b0zWiLT7paZEt6JawAzP15jc3Dgh3ywM2zaPI3wX9AHqD__jb4e-QjcRk8cjySMaImeHHkqIimt7CYKdGStf4jWMyMHVovpW6M8jNRxZK7mMm--2pqlpyZ7L-VkJYlVju6XP4A" }, { "id": "rich-decision-tree", "category": "Flowchart", "title": "Decision Tree", "description": "A branching decision flowchart with multiple outcomes.", "source": "graph TD\n A{Is it raining?} -->|Yes| B{Have umbrella?}\n A -->|No| C([Go outside])\n B -->|Yes| D([Go with umbrella])\n B -->|No| E{Is it heavy?}\n E -->|Yes| F([Stay inside])\n E -->|No| G([Run for it])", "options": {}, "renderUrl": "/examples/corpus/#rich-decision-tree", "editorUrl": "/editor/#deflate:TY89j8IwDIb_iuWpSEVi7gDi-25huLsFFYYQTGupJFXicKra_neUgq632Xre97HcorfBacIMC6fqEn42JwOwbD89sIBTbNgUix6m03l3JN_Bqv1QD4JwvziqKrXoh_zAD7aDdZLvLdggnq90nkS4Gsubgf6ylH-C_5ko2L5Pl6Qezcu-HQW7JP8W1QCb0f_CsbtP8q9g4GYdsJwnmGKtKhKJ72GKXpoqjtqxr-NOdMVslqK25sYFZi1qe6-VFszEBer7Jw" }, { "id": "rich-git-branching-workflow", "category": "Flowchart", "title": "Git Branching Workflow", "description": "A git flow showing feature branches, PRs, and release cycle.", "source": "graph LR\n A[main] --> B[develop]\n B --> C[feature/auth]\n B --> D[feature/ui]\n C --> E{PR Review}\n D --> E\n E -->|approved| B\n B --> F[release/1.0]\n F --> G{Tests?}\n G -->|pass| A\n G -->|fail| F", "options": {}, "renderUrl": "/examples/corpus/#rich-git-branching-workflow", "editorUrl": "/editor/#deflate:Tc9Lq8IwEAXgvzLMur62XdyLVevGxaXcXXUxpFMbiE3IoyJt_7skgro7-Q5zICM6HaxgzPFqyXRwqs49wLa-kewvsFj8QFE3PLDS5hKbItmubpl8sLyi4LuvYv8ugky8S3wY_yqoeJB8n6PuXxrjIcaJjLF64GaC4jNW1pYVk-PVZrlOa2Xy4_jPzrvfNHVM94acm2D7gZakmqDEDA0p9j7-EDN0_qFiFFY6E9_MDebrDIXuW3nFfEShb4aEx9zbwPP8BA" }, { "id": "rich-architecture-edge-platform", "category": "Architecture", "title": "Architecture: Edge Platform", "description": "Nested groups, service cards, and storage links for a regional edge platform.", "source": "architecture-beta\n group region(cloud)[EU West]\n group edge(server)[Edge Layer] in region\n group core(cloud)[Core Services] in region\n service ingress(internet)[Global CDN] in edge\n service gateway(server)[API Gateway] in edge\n service auth(server)[Auth Service] in core\n service billing(server)[Billing Service] in core\n service ledger(database)[Ledger] in core\n ingress:R --> L:gateway\n gateway:B --> T:auth\n gateway:R --> L:billing\n billing:B -[stores invoices]-> T:ledger\n auth:B -[reads session]-> T:ledger", "options": { "bg": "#0f172a", "fg": "#e2e8f0", "line": "#475569", "accent": "#38bdf8", "muted": "#94a3b8", "surface": "#111827", "border": "#334155" }, "renderUrl": "/examples/corpus/#rich-architecture-edge-platform", "editorUrl": "/editor/#deflate:fZJPaxsxEMW_ihhfbFiD139qR4dCnIQQMKW0KT1sc9BqZ2WBIpnRrIMJ-e5F8jp2S8ht5s3vjZ6EXiGGjjSCBEV6axk1d4TjGln98UIYCt1OEBob_FC70DWj6u6X-I2Rn85zbAwOI9IeaVTdNQbFRh2QnoT1vffM6kB42nQTCMVPpL3VGP-j0zqrUVhvCGMcWs9IHnlU3btQKydubr9lSzr80mAU44s6vOe5_v4g7o_ah7zqeHuGO96eEmU6xb2ka-uc9ebdsD72n3pcOpKGjWJVq4ijapOFf9j-mvKHGI-_io3sb5Hf7VjKdR49yhT4Uj9Z-mhp1JdyLcZV5EAYhfX7kJ857zhGSmjaljlC1UQRMUYb_CUFBeyUQ-b0S6CAyAeXSk027lKP2ICcFKCDb60B-Qq1AQmDSVsupwoKaHOLU1y1EyjAWZ_8g_lysfhyBQUordFzkmarumlXUMBzx2krDK7malYnJXbUqvxTB2VZrqZLKKAO1CBl42xeLhaQQjzvlGaQTB2-vf0F" }, { "id": "rich-architecture-event-spine", "category": "Architecture", "title": "Architecture: Event Spine", "description": "Boundary-aware edges, a junction fan-out, and data services separated into zones.", "source": "architecture-beta\n group app(cloud)[Application Zone]\n group data(cloud)[Data Zone]\n service api(server)[Public API] in app\n service workers(server)[Async Workers] in app\n junction bus in app\n service cache(disk)[Hot Cache] in data\n service stream(database)[Event Store] in data\n api:B --> T:bus\n bus:B -[fans out]-> T:workers\n api:B -[reads profiles]-> T:cache\n workers:B -[persists events]-> T:stream\n api{group}:B -[private link]-> T:stream{group}", "options": {}, "renderUrl": "/examples/corpus/#rich-architecture-event-spine", "editorUrl": "/editor/#deflate:bZFPa8MwDMW_ivApgRZ2zmHQ_YHtVthgsKwHxVFbr6ltJLmjlHz34SRbM9hNevo9-dm-GAmJLZnKINu9U7KamJYNKX54gB2HFAFjLGwXUlvWqxg7Z1Fd8PAePG2uVIuKP9gDKl7nQnxylgCjK3JNXNbr1HTOwmr9vAHn8xFz8ivwgVh-6ZWcvYW3UZ0bPpO3Q5gmyT97LNo9Fa2TQ1k_BYX73A_-nHZOijLhschyg0Jl_Xgir_Cigf8aMLrqDpbLW3itmiRZapJkqd6iFwhJN8NwusPMUzNhKxA5bF1HMmJDxAxN_ABGYnGiApRTTOQYcdp3GR69H2l2J1SCzvnDHJ0YszARO1LN32wWRvTc5dKyk5h7otZUNwtjg9-6nakuxoZjRKumUk7U998" }, { "id": "rich-architecture-regional-failover", "category": "Architecture", "title": "Architecture: Regional Failover", "description": "Two regions with replicated data paths and warm standby ingress.", "source": "architecture-beta\n group primary(cloud)[Primary Region]\n group standby(cloud)[Standby Region]\n service edge1(server)[Ingress] in primary\n service app1(server)[App Cluster] in primary\n service db1(database)[Primary DB] in primary\n service edge2(server)[Warm Ingress] in standby\n service app2(server)[Warm App] in standby\n service db2(database)[Replica DB] in standby\n service wan(internet)[Internet]\n wan:R --> L:edge1\n edge1:B --> T:app1\n app1:B --> T:db1\n edge2:B --> T:app2\n app2:B --> T:db2\n db1{group}:B -[streams replica]-> T:db2{group}", "options": { "bg": "#fffaf0", "fg": "#3f2d16", "line": "#8b5e34", "accent": "#d97706", "muted": "#8c6a43", "surface": "#fef3c7", "border": "#d6b37b" }, "renderUrl": "/examples/corpus/#rich-architecture-regional-failover", "editorUrl": "/editor/#deflate:dZJPi9swEMW_iphcsuBAYm-TrQ6F3fZS6KGkhR7SHEbSyBXYshjJXZaQ716k_DNLc_K8599onsc6QBxG1gQSkPUfl0inkWmhKOFvL0TLwxhEYNcjv811N4zmYff9JMWWWjf4_Y2LCb1RV-7HSU65SPzXaRJkWlrNsyJ-2H31LVOMe-H8ZdYUxhBu7HMI4nM3xkR8jzdqNTeYUGGkW9ovL_f4HKa-DviF3ItpovNXvUv0ruE5hHuwUfUkzpZC5zRe4vyHf0U_dz4Re0p5N6eqrO8VvdyKxeKT-CbLCrNZCvlS7J8yLyu7-Xk1jbqS9ZSsz-TNNKp4Rq0O5Z8e85tdTEzYR8Gn8PsLemaggoAdpZTvEVQQ01uXS80uhqyJDMhlBXrw1rUgD6BakDCz1qJdQgW2yMbWZrWGCjrnc__sSX2g5hEqQK3Jp2yZj5vNMjP9mPKpMHvSa3xs8piRLZa7PLNkG72BCtTAhrg0rlWzUZBD9AF1Apl4pOPxHw" }, { "id": "rich-basic-state-diagram", "category": "State", "title": "Basic State Diagram", "description": "A simple `stateDiagram-v2` with start/end pseudostates and transitions.", "source": "stateDiagram-v2\n [*] --> Idle\n Idle --> Active : start\n Active --> Idle : cancel\n Active --> Done : complete\n Done --> [*]", "options": {}, "renderUrl": "/examples/corpus/#rich-basic-state-diagram", "editorUrl": "/editor/#deflate:XY4xCsMwDEWvIjSGBEpHD4VClp4hzSAUNRgcO9hKoITcvci0Syfpvyc-OrCkLbOgw6Kk0nuaMy3dfn1GgKEZoetu8JiCWLZZwZ3V7wIOilJWU1_yuwYHTJEl_Lk-xerSsgbRWlqRuaEZscWVgqjaQ9hi0XewlbMvq2WRCd2lRU7x5Wd0B1oVsaLTvMl5fgA" }, { "id": "rich-state-composite-states", "category": "State", "title": "State: Composite States", "description": "Nested composite states with inner transitions.", "source": "stateDiagram-v2\n [*] --> Idle\n Idle --> Processing : submit\n state Processing {\n parse --> validate\n validate --> execute\n }\n Processing --> Complete : done\n Processing --> Error : fail\n Error --> Idle : retry\n Complete --> [*]", "options": {}, "renderUrl": "/examples/corpus/#rich-state-composite-states", "editorUrl": "/editor/#deflate:XZCxasNADIZfRWgMNoSON3RJO2TrnmRQz7I5OPsOnRwSjN896EyD6SLp1yf9CC1Y0iye0WFRUv4KNAiN7f3jOgFcDjdo2084d5FNW66NH0meSwnTAA7K_DsGNV4t9nCxLkAmKdvinWLoSKsbvFVF_GA_b2S1sLMxfEpjjqwMDro01bF_E98iScBBTyEa3vTf_eBAWOVp5O1l8HK4YYOZIqvaH7DBos9opZdQsmnmDt2xQZ-mPgzoFvRpzOQVncrM6_oC" }, { "id": "rich-state-connection-lifecycle", "category": "State", "title": "State: Connection Lifecycle", "description": "TCP-like connection state machine with multiple states.", "source": "stateDiagram-v2\n [*] --> Closed\n Closed --> Connecting : connect\n Connecting --> Connected : success\n Connecting --> Closed : timeout\n Connected --> Disconnecting : close\n Connected --> Reconnecting : error\n Reconnecting --> Connected : success\n Reconnecting --> Closed : max_retries\n Disconnecting --> Closed : done\n Closed --> [*]", "options": {}, "renderUrl": "/examples/corpus/#rich-state-connection-lifecycle", "editorUrl": "/editor/#deflate:fZDBqsJADEV_JWQpLYjLWbyNfoFbFRnSWAbamZKk4kP898c4fdSiuEsuJ7mXe0dNoxCjQzVvvAu-Fd_X180xAhxWJ6jrH9h2SbnJSpmKmGJkshBbcEBleSKz_oJxAw50JGLVT1T568BCz2l8fTTZ7YJOJpNjvnjH9rygWCRJphb6l1zv3H-y3t_OwiaBn-Ayz4JsUizJ5rIOqxNWOPiOzXLZWKHab5dHkqBD3pkbdOsKKcVLaNHdkVI_eDJ0JiM_Hn8" }, { "id": "rich-state-cjk-state-names", "category": "State", "title": "State: CJK State Names", "description": "State diagram using Chinese characters for state names.", "source": "stateDiagram-v2\n [*] --> 空闲\n 空闲 --> 处理中 : 提交\n 处理中 --> 完成 : 成功\n 处理中 --> 错误 : 失败\n 错误 --> 空闲 : 重试\n 完成 --> [*]", "options": {}, "renderUrl": "/examples/corpus/#rich-state-cjk-state-names", "editorUrl": "/editor/#deflate:q1Yqzi8tSk5VslIqLkksSXXJTEwvSszVLTOKyVNQiNaKVdDVtVN4vnLXy-mbQCIQFljw6ZKW5xPanuxYq2Cl8Kx_wpNdS0AKEKJgNet6nnVMACnomPC0az6mgpdTZr5Yv17BSuHpko0vtiwFKYAKIexVsFJ42d77Yv1UsHaIiSDZaK1YJR2lgsSc1JISkAeUdJSKSypzQMzkosziAhA_NTVFycpARyk5Py8tM13JqlopOT-3IDG5RMmqpKg0tbYWAA" }, { "id": "rich-sequence-basic-messages", "category": "Sequence", "title": "Sequence: Basic Messages", "description": "Simple request/response between two participants.", "source": "sequenceDiagram\n Alice->>Bob: Hello Bob!\n Bob-->>Alice: Hi Alice!", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-basic-messages", "editorUrl": "/editor/#deflate:JYw7DsMgEAWvgrcGKfUWSEEpfIg0sNlYSJglfArL8t0jku6NZvROaDIqMSA0_gzOxI_ot-r3Z1bqniKxsdZJQLVySqKchGUqJ8EYa38FqjX-2wU0FJ-49_kIGlo_0pxUYyuTmV-ANw0k-R03wBNI9uKpA_Y6-Lq-" }, { "id": "rich-sequence-participant-aliases", "category": "Sequence", "title": "Sequence: Participant Aliases", "description": "Using `participant ... as ...` for compact diagram IDs with readable labels.", "source": "sequenceDiagram\n participant A as Alice\n participant B as Bob\n participant C as Charlie\n A->>B: Hello\n B->>C: Forward\n C-->>A: Reply", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-participant-aliases", "editorUrl": "/editor/#deflate:XY7BCsIwEER_ZdlzA55zCCQV8ezZy7pdayBNYpIiUvrvEo-9zbzHwGxY01pYUGOV9yqR5expLrTcI0Cm0jz7TLGBBapgg2c5GteNS48jHzsfX1SC_2-sMsZpuEoIqXenjBk1XFL5UJk6GZUyxmq4SQ5fHDBTkNb6ORywtm_okYuvuXeRCfVpQE7x6WfUG3JaMnFD3coq-_4D" }, { "id": "rich-sequence-actor-stick-figures", "category": "Sequence", "title": "Sequence: Actor Stick Figures", "description": "Using `actor` instead of `participant` renders stick figures instead of boxes.", "source": "sequenceDiagram\n actor U as User\n participant S as System\n participant DB as Database\n U->>S: Click button\n S->>DB: Query\n DB-->>S: Results\n S-->>U: Display", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-actor-stick-figures", "editorUrl": "/editor/#deflate:TY4xbsMwDEWvQnC2gc4aNLi6QGt468KwbCBUkVSRGowgdy_YLN3433sD76htDhYMqPIzpbKkTNdBt48KQGxtwAGkcKgMR52GZc6dqsHuYj_V5K_-r9LmLpHRhVTcHmuMe4DXkvkbLtOsVcf7GmPaArxNGaeDtK3P8l10FtNntMZ4BEhZe6ETF-xUxMzfxgXVzuInj6zdt8gnhpcFudWvfMVwR263TmwYbEx5PH4B" }, { "id": "rich-sequence-arrow-types", "category": "Sequence", "title": "Sequence: Arrow Types", "description": "All arrow types: solid `->>` and dashed `-->>` with filled arrowheads, open arrows `-)` .", "source": "sequenceDiagram\n A->>B: Solid arrow (sync)\n B-->>A: Dashed arrow (return)\n A-)B: Open arrow (async)\n B--)A: Open dashed arrow", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-arrow-types", "editorUrl": "/editor/#deflate:TY4xC8MgFIT_yuNNFSJ0dhAM2Tt07SLmNRUStU-lhJD_XixtyXbHd3fchjlWdoQKMz0rBUeDtxPb5RYAjNS6V3CNsx_BMscXnPIanGiwl1Jro2Cw-UF_zFQqh0_ASNEruCQKP2iPZWG-cDwMYIfJzlRKe4Qd5rLOTTr2OTVPNKI6d-hiuPsJ1YYuLsm6gqpwpX1_Aw" }, { "id": "rich-sequence-activation-boxes", "category": "Sequence", "title": "Sequence: Activation Boxes", "description": "Using `+` and `-` to show when participants are active.", "source": "sequenceDiagram\n participant C as Client\n participant S as Server\n C->>+S: Request\n S->>+S: Process\n S->>-S: Done\n S-->>-C: Response", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-activation-boxes", "editorUrl": "/editor/#deflate:XY67CsMwDEV_xWhtAp09ZHE-oNRrF6OqwZDYrqQUSsi_F_WxdNM9RxJ3A6krI4EHoftKBWnMaeK0XIpzLbFmzC0VdcElcWHOVPRfRVOR-EFsKvTDcIjene2hvLfjF524Ion8UB-9G2uhTzYQ7ExaLULQQUszqVo56ED0OduInKVZJrqCP3aAtdzyBH4DrEtLqOCVV9r3Fw" }, { "id": "rich-sequence-self-messages", "category": "Sequence", "title": "Sequence: Self-Messages", "description": "A participant sending a message to itself (displayed as a loop arrow).", "source": "sequenceDiagram\n participant S as Server\n S->>S: Internal process\n S->>S: Validate\n S-->>S: Log", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-self-messages", "editorUrl": "/editor/#deflate:TY2xCsMwDAV_RWhOobOHTF0K3QydughFDQbHdiWlEEL-vZgs3d7dDW9Hq6uyYECTzyqF5ZZoVlpeBaCReuLUqDhEIIMo-hXtKV7GMQa4FxctlKFpZTH7S0_KaSKXU53uUWccsFEW9_6JA5pvuU_WZK2zyIThOiDX8k4zhh25Lo3YMbiuchw_" }, { "id": "rich-sequence-loop-block", "category": "Sequence", "title": "Sequence: Loop Block", "description": "A `loop` construct wrapping repeated message exchanges.", "source": "sequenceDiagram\n participant C as Client\n participant S as Server\n C->>S: Connect\n loop Every 30s\n C->>S: Heartbeat\n S-->>C: Ack\n end\n C->>S: Disconnect", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-loop-block", "editorUrl": "/editor/#deflate:XY5BC8IwDIX_Ssh5A8FbDwPpBO-7eokxSnFra5oJMvbfpQoi3vLe9_HIgiXNyoIOi9xniSx9oKvSdIwAmdQCh0zRwAMV8GOQaP9oqGgQfYhW5NuuGxz4FKPwWx5TyrB_iD5huym1-VoHIbWT0NsDGNq267yDHd9qIfH8s9iHwp9RbDDTKGb1cWyw2HOsJ2souWaRM7pNg5ziJVzRLchpysSGznSWdX0B" }, { "id": "rich-sequence-alt-else-block", "category": "Sequence", "title": "Sequence: Alt/Else Block", "description": "Conditional branching with `alt` (if) and `else` blocks.", "source": "sequenceDiagram\n participant C as Client\n participant S as Server\n C->>S: Login\n alt Valid credentials\n S-->>C: 200 OK\n else Invalid\n S-->>C: 401 Unauthorized\n else Account locked\n S-->>C: 403 Forbidden\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-alt-else-block", "editorUrl": "/editor/#deflate:XY9NS8RADIb_Ssh5C_XjNIeCVARR8FD05CVmYg3OZupMuqDL_neZelFved_nCSRHrHktLBiwyscqxnKtNBfaPxvAQsWVdSFzGIEqjEnF_D-aGpqkHKQ0NHbDMAW4z7Nay5QcnihpBC4SxVwp1QYApq4bhjHAed_Dw13rJFWBWzs0_69z2Z_Bo9Hqb7nol2x0s6-Y82oOKfP7T_176QJucnnRGGU7RiziDhdK4t6-xh1W_0xt5KJ1aVkkYuh3yNledcZwRM77hdgxeFnldPoG" }, { "id": "rich-sequence-opt-block", "category": "Sequence", "title": "Sequence: Opt Block", "description": "Optional block — executes only if condition is met.", "source": "sequenceDiagram\n participant A as App\n participant C as Cache\n participant DB as Database\n A->>C: Get data\n C-->>A: Cache miss\n opt Cache miss\n A->>DB: Query\n DB-->>A: Results\n A->>C: Store in cache\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-opt-block", "editorUrl": "/editor/#deflate:XY-xasQwDIZfRWhOoLOHQGJD57brLaqiXg2J7VrycBz37sVNCyWb9H36hXRHza2yoEOVryaJJUS6VtovCaBQtcixUDKYgRTmUs7cd-6JP-VswtJVIKN30h87j9PkHTyLwUpGHflxnKbZHRtgj6qd5mIncoTD4uClSb0dKCy_6VfRttm_Qe_gzXIViAn47zhJKw5YaBOz_jEOqHbbesk1aum9yIruaUDO6SNe0d2R816IDZ3VJo_HNw" }, { "id": "rich-sequence-par-block", "category": "Sequence", "title": "Sequence: Par Block", "description": "Parallel execution with `par`/`and` constructs.", "source": "sequenceDiagram\n participant C as Client\n participant A as AuthService\n participant U as UserService\n participant O as OrderService\n C->>A: Authenticate\n par Fetch user data\n A->>U: Get profile\n and Fetch orders\n A->>O: Get orders\n end\n A-->>C: Combined response", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-par-block", "editorUrl": "/editor/#deflate:dZA9awMxDIb_itB8B509GIxLO95Qbuui2kpiuLNdWS6UkP9enLaEBjrp43n0DjpjK10Co8HG751z4MdER6H9NQNUEk0hVcoKHqiB3xJnvUduINf19MLykQLf83XwtbH8w5fBF4l_BD9b68w1lrOmQPp7B0-s4QS9sUAkpbEGcLO1q4FnVqhSDmm76pTjj15Gfru5y7d7W3OOo7h5ttYb8GV_S5kjCLdacmOcsNLGquNZOGHTz220QVKrY2aOaB4mDCUf0hHNGUPZKwVFo9L5cvkC" }, { "id": "rich-sequence-critical-block", "category": "Sequence", "title": "Sequence: Critical Block", "description": "Critical section that must complete atomically.", "source": "sequenceDiagram\n participant A as App\n participant DB as Database\n A->>DB: BEGIN\n critical Transaction\n A->>DB: UPDATE accounts\n A->>DB: INSERT log\n end\n A->>DB: COMMIT", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-critical-block", "editorUrl": "/editor/#deflate:XY-7DsIwDEV_xfJcJOYMSC2pUAcegrKxGGOqSCUJiTsgxL-jTDw233OudOUn5jAlFjSY5T6JZ7GOhkS3kweIlNSxi-QVaqAMdYz_3DZFWFI6U5Zi69liYRsDTbvqNgVwcuqYRugT-UysLvjCP9XjztZ9C8QcJq_5V3abQ7vvYQxD4eIv3yPL7Xrd9VhhpFFUyyNYYdbHWE5OLseSRS5o5hVy8Fc3oHkih1skVjSaJnm93g" }, { "id": "rich-sequence-notes-right-left-over", "category": "Sequence", "title": "Sequence: Notes (Right/Left/Over)", "description": "Notes positioned to the right, left, or over participants.", "source": "sequenceDiagram\n participant A as Alice\n participant B as Bob\n Note left of A: Alice prepares\n A->>B: Hello\n Note right of B: Bob thinks\n B-->>A: Reply\n Note over A,B: Conversation complete", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-notes-right-left-over", "editorUrl": "/editor/#deflate:XY8xawMxDIX_itB8B509HNjt0KlD5y6u--5i6liurAuEkP8enECGbpLe9wnehbvsmsCOO_521IS3HDeNx69K1KJaTrnFauQpdvIlJ_xPwkiCfI_7hxioYDWSlbx7CNQULSr6IPy8LMHRO0qRp6F5O9yV4MYnskOuv3c8zPOyeEefaOX85OUEJT8FR69ST9AeLUulJMdWYOCJWywwG7144m7nMsakubexAz_sXiZOUte8sbvwUGMydqY7rtcb" }, { "id": "rich-sequence-oauth-2-0-flow", "category": "Sequence", "title": "Sequence: OAuth 2.0 Flow", "description": "Full OAuth 2.0 authorization code flow with token exchange.", "source": "sequenceDiagram\n actor U as User\n participant App as Client App\n participant Auth as Auth Server\n participant API as Resource API\n U->>App: Click Login\n App->>Auth: Authorization request\n Auth->>U: Login page\n U->>Auth: Credentials\n Auth-->>App: Authorization code\n App->>Auth: Exchange code for token\n Auth-->>App: Access token\n App->>API: Request + token\n API-->>App: Protected resource\n App-->>U: Display data", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-oauth-2-0-flow", "editorUrl": "/editor/#deflate:bVFNa8MwDP0rwte1sLMPgdLuUNghdOS2i1DUxDS1PVkZ60r_-3C8hpTtZEvvQ0_21aQwCrGxJvHHyJ5457ATPL97ACQNAg1ggiax5FZEUUcuolfYxJih7eC4VH8Io_aZMZ1vLJ__eNT7zDhwyZHrTGnWVbWJ0WZzOsFr6JzP_U2MGRm1t5NrEPeN6oIHyfGTTqRR-3VVNbboIGLHs-kk3Qq37NXhkGbBfeKjLYV20i4Hv3xRj77jCYRjENBw4pLvwYmIU1qAxaPeWziUtPC0QOv9rKwlKJNyC_L7MHd92WvnUhzwAi0qmpWJOLBq_kSzMkkvQ76SuBRzzdwa-7wyFPzRdcZeDYVzRFJjVUa-3X4A" }, { "id": "rich-sequence-database-transaction", "category": "Sequence", "title": "Sequence: Database Transaction", "description": "Multi-step database transaction with rollback handling.", "source": "sequenceDiagram\n participant C as Client\n participant S as Server\n participant DB as Database\n C->>S: POST /transfer\n S->>DB: BEGIN\n S->>DB: Debit account A\n alt Success\n S->>DB: Credit account B\n S->>DB: INSERT audit_log\n S->>DB: COMMIT\n S-->>C: 200 OK\n else Insufficient funds\n S->>DB: ROLLBACK\n S-->>C: 400 Bad Request\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-database-transaction", "editorUrl": "/editor/#deflate:XZBBa8MwDIX_ivA5YWHs5EOgSUoJa5sR5zgYqqMEQ-pktjwYpf99uGO0y03vfXoSvIvwc3CahBSePgNZTZXB0eH53QIs6Nhos6BlKAE9lJMhy2ukIlLkvsitUVVEViHjCT1FWqZ5riS8NaqDJ3Zo_fAbU2meV4WEYrurj49GRSfDgFrPwTJsIsKJQQWtyfso77ulo_5hufhP66Path1g6A1_TPO4yjaHQ939eWmelxKeswya1-jR5Alq68MwGB1bgCHYfvW-bfb7YlPeAvcjL1kGBfbQxob9rT6yvUjEghMxx_JFIjx_T3HUzvglaqJeyCwReraDGYW8CD2fF9QsJLtA1-sP" }, { "id": "rich-sequence-microservice-orchestration", "category": "Sequence", "title": "Sequence: Microservice Orchestration", "description": "Complex multi-service flow with parallel calls and error handling.", "source": "sequenceDiagram\n participant G as Gateway\n participant A as Auth\n participant U as Users\n participant O as Orders\n participant N as Notify\n G->>A: Validate token\n A-->>G: Valid\n par Fetch data\n G->>U: Get user\n U-->>G: User data\n and\n G->>O: Get orders\n O-->>G: Order list\n end\n G->>N: Send notification\n N-->>G: Queued\n Note over G: Aggregate response", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-microservice-orchestration", "editorUrl": "/editor/#deflate:bZGxasQwDIZfRWhOoLOHQKDUW0Ip6dRFOLqcac7O2XLLcdy7FyXhhtDN1qdP-o3vmGNJjtFg5mvh4PjV05To8hUAFkrinV8oCFigDJaEf-l2ZK2ytsj5CAYFQ-aUj6RX0qfxH9Qp6qL407rI1k3TGvik2Y8kDBK_OSho67pp7E72IfDG4s4wkpBWNnswYFmgZE5bcdhNTfbspbAO2ZR-U-IzIEC_S2tomH0WrfNmqdMZ-OAwQtDo3pH4uObsdvG9cOG1u4vCEH84gTXQTlPiSV-WOC8xZMYKF5pZRL8FK8xym_Xoks-L3plHNC8VuhhOfkJzRxcvCzlBI6nw4_EH" }, { "id": "rich-sequence-self-messages-with-notes", "category": "Sequence", "title": "Sequence: Self-Messages with Notes", "description": "Self-referencing messages inside alt blocks with notes — tests that notes clear self-message loops and stack without overlapping.", "source": "sequenceDiagram\n participant User\n participant Main as Main Process\n participant Renderer\n participant Timer as 3s Fallback Timer\n User->>Main: CMD+W\n Main->>Main: event.preventDefault()\n Main->>Renderer: WINDOW_CLOSE_REQUESTED\n Main->>Timer: Start 3s timer\n alt Multiple panels\n Renderer->>Renderer: closePanel(focusedId)\n Note over Renderer: Panel removed\n Note over Renderer: No confirmCloseWindow!\n Timer-->>Main: 3s elapsed → window.destroy()\n else Single panel\n Renderer->>Renderer: closePanel(lastId)\n Note over Renderer: Stack becomes []\n Renderer->>Renderer: Auto-select fires → new panel created!\n Note over Renderer: Panel reopens\n Timer-->>Main: 3s elapsed → window.destroy()\n end", "options": {}, "renderUrl": "/examples/corpus/#rich-sequence-self-messages-with-notes", "editorUrl": "/editor/#deflate:nZPPahsxEMZfZapTSu1QyG0PgeJ1IFA7aTbBh7YERfpsRLWSopm1CSHXPkAfsU9StBub_CEm9CRp-M3M982ge8WxywaqUozbDsGgdnqVdfsjECWdxRmXdBC6YuSXsZl2gTQP53mOBswvmQsEi_w699K1yCX5iOlEe3-jza8hWMjSbXx8XApXNJnVnxYlWp67KNYIcphyf9ZY6s7Lwccn2LZzRYvTeX22uJ58PWum1xfTb1fT5nJaP0H7vhU1orMUQbLVob3QrPPikgclHeB7g7Sz9ayP8ZFxXqiDZTQdw57aXhHRPAoorpF3mRX1JGW0cQ37NjaPZGJYutxOSv2FCzZuPgx8L3y8m8kRE7xODEt_f_-hTY8eWrDkeDcMB55BjQurraH3-fGaZa-ZRsoCb2BiC6bvP_eU_dJJHDM8jNDSZXAvNmAzCCKToQX20eK-ycWE8LiQ_5hEsGqkkvYQKR9AjRTLnS9Xkx2n8gasqj6PVL-AlarulYlt0kZUJbnDw8M_" }, { "id": "rich-class-basic-class", "category": "Class", "title": "Class: Basic Class", "description": "A single class with attributes and methods, rendered as a 3-compartment box.", "source": "classDiagram\n class Animal {\n +String name\n +int age\n +eat() void\n +sleep() void\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-class-basic-class", "editorUrl": "/editor/#deflate:Tc2xCgIxDIDhVwmZFDs4dxN8A1eX0Isl0KalzQly9N2lxwmO_7f8G_aytsDoMSTq_S4UG-WnAuwNN5VMCbYpAJeHNdEISpkPETWg-CsmO53hXWQ5oCfm-kcDHVZKbDaf6LDbJ-37Jr3OZl7QXx2Goi-J6DcMJVcKht7aymN8AQ" }, { "id": "rich-class-visibility-markers", "category": "Class", "title": "Class: Visibility Markers", "description": "All four visibility levels: `+` (public), `-` (private), `#` (protected), `~` (package).", "source": "classDiagram\n class User {\n +String name\n -String password\n #int internalId\n ~String packageField\n +login() bool\n -hashPassword() String\n #validate() void\n ~notify() void\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-class-visibility-markers", "editorUrl": "/editor/#deflate:TY_BasNADER_RagXm7jQs8-h0Fuh9NaLulY2omutWSkpwTjfHhxvSo_zNHowM1o-lcDYY0hktheKhcYvBbhn-DQuMK8ZYPfhRTSC0sgbea5kIrPfXIaNPok6iDoXpfRW4fWvGn4o8qtwqpddylG0aeE751S9R7Lje5U2LWy_1X6mJAM5Ny2cszz0ml0Ol39swQ4nSuy-rsMOzS_pPrSITWtmHrB_6TBkPUjEfsaQx4mCY-_lxMtyAw" }, { "id": "rich-class-interface-annotation", "category": "Class", "title": "Class: Interface Annotation", "description": "Using `<>` annotation above the class name.", "source": "classDiagram\n class Serializable {\n <>\n +serialize() String\n +deserialize(data) void\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-class-interface-annotation", "editorUrl": "/editor/#deflate:RY6xCsMwDER_RWhqaIbOJmTqH2TtotpKEDh2kJVCG_LvxWmg4713cLdhyat6Roc-Uil3oUlpfiSAI8PAKhTlQ8_IsFUO0HWSjHUkz33_Q9dy9vjSwGAqaTpF4L8KZNTAK0uocscWF4psVuexxWLveDxRKUvNzAHdrUWf0ygTug19nhfyhs505X3_Ag" }, { "id": "rich-class-abstract-annotation", "category": "Class", "title": "Class: Abstract Annotation", "description": "Using `<>` annotation for abstract classes.", "source": "classDiagram\n class Shape {\n <>\n +String color\n +area() double\n +draw() void\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-class-abstract-annotation", "editorUrl": "/editor/#deflate:Lc4xDoMwDIXhq1ieQGXoHCGm3oC1i3FcGimQyDGtKsTdq9CO_7e8t2NJm7KgQ45Uyi3QrLTcV4CzYXxSFtgrAPQ9TcWU2IbhJ5fRNKwzcIpJ_0Qq1LTg0zZF-ZtXejctvFLwVQ7sMFMUs7qMHRb7xPOEhpJri3h01w45rY8wo9uR05KJDZ3pJsfxBQ" }, { "id": "rich-class-enum-annotation", "category": "Class", "title": "Class: Enum Annotation", "description": "Using `<>` annotation for enum types.", "source": "classDiagram\n class Status {\n <>\n ACTIVE\n INACTIVE\n PENDING\n DELETED\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-class-enum-annotation", "editorUrl": "/editor/#deflate:Tc4xC8MgEAXgvyI3Z-gsIVCqFKGEQkOnLoe9BiFR0XMokv9eTJZu73vLexVyKMkSSLAL5qwczgnXlxdit3gwcsmitkaIvidfVkrILvhhOMrzZTJPfWQz_uuuR2XG6wGlb3rSqmGDDiIuxNyGoYPM32X_kFyOzURvkKcObPAfN4OsYMMa0TJIToW27Qc" }, { "id": "rich-class-inheritance", "category": "Class", "title": "Class: Inheritance (<|--)", "description": "Inheritance relationship rendered with a hollow triangle marker.", "source": "classDiagram\n class Animal {\n +String name\n +eat() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +meow() void\n }\n Animal <|-- Dog\n Animal <|-- Cat", "options": {}, "renderUrl": "/examples/corpus/#rich-class-inheritance", "editorUrl": "/editor/#deflate:bY9BC8IwDIX_SshJ2QTPw4vMi2evXrIujmLbjDZTZO6_S8dQGB7fRz5e3ohJhmgYKzSOUjpZ6iL5awCYMxyD9eRgzASguGi0oYNAnhfCpJstPMS2GUw_8yTdWmsi83wGUDQU7__FmvQrNiIObDqHViQuzLM81-by5uG92-XiNapJscSeHKvmrVhi0pebZ0eb-pyZW6z2JRoJN9thNaIR35NRrDQOPE0f" }, { "id": "rich-class-composition", "category": "Class", "title": "Class: Composition (*--)", "description": "Composition — \"owns\" relationship with filled diamond marker.", "source": "classDiagram\n class Car {\n +String model\n +start() void\n }\n class Engine {\n +int horsepower\n +rev() void\n }\n Car *-- Engine", "options": {}, "renderUrl": "/examples/corpus/#rich-class-composition", "editorUrl": "/editor/#deflate:XY7LCsIwEEV_ZZiVjxZcZ6t-gVs3IR1jIM2EybQiJf8uKUXB5TlwuHfBwpM4QoMu2lIuwXqx4z0BrAxnK7A0BDjeVELyMPJAcVNFrehuDzOHoan6K6_Jh0TfOCSFJ0uhzC-STQrN_3EbPPT9lmOH2UZSbQ-xw6LvuJ6VUHJjogHNqUPH6RE8mgUdj9k6RaMyUa0f" }, { "id": "rich-class-aggregation-o", "category": "Class", "title": "Class: Aggregation (o--)", "description": "Aggregation — \"has\" relationship with hollow diamond marker.", "source": "classDiagram\n class University {\n +String name\n }\n class Department {\n +String faculty\n }\n University o-- Department", "options": {}, "renderUrl": "/examples/corpus/#rich-class-aggregation-o", "editorUrl": "/editor/#deflate:XY47CsMwEESvsmwbGVKr9g1CujSLshYC_VitAsb47kYuEpPyDW-G2bCVLo7RoovU2hzIC6VXBjgZnjl8WFrQFbaRAtweKiF7yJR4JPtPnrmSaOKs__JCrkddv_5ltkzTpYgGK0VWHZfQYNM1nu8ktDqY-Y32btCVvASPdkNXUiWnaFU67_sB" }, { "id": "rich-class-association", "category": "Class", "title": "Class: Association (-->)", "description": "Basic association — simple directed arrow.", "source": "classDiagram\n class Customer {\n +String name\n }\n class Order {\n +int orderId\n }\n Customer --> Order", "options": {}, "renderUrl": "/examples/corpus/#rich-class-association", "editorUrl": "/editor/#deflate:TY67CgIxEEV_ZZjWLFinsNHGysLWJiRjCOTFZLaQkH9fssJqeQ6Hy-3YysqWUKONprVbMJ5NemWAneG6NimJGPp0AKencMgeskk0zfilD3Z_XcgCZZq7O7pjbFku3xwVVhNJZD5AhU0-cT_DodXJRA71WaEt-R086o62pGqsoBZeaYwN" }, { "id": "rich-class-dependency", "category": "Class", "title": "Class: Dependency (..>)", "description": "Dependency — dashed line with open arrow.", "source": "classDiagram\n class Service {\n +process() void\n }\n class Repository {\n +find() Object\n }\n Service ..> Repository", "options": {}, "renderUrl": "/examples/corpus/#rich-class-dependency", "editorUrl": "/editor/#deflate:TY6xCoNAEER_ZdlKiUjqK1KlDyRtmsu6ygZ1j9tTEPHfwwkxKd_wZpgVTadIjA6p92ZX8V30w3ME2BkeHGchhjVHAKcQldisKGFWaXK4_eQ7BzVJGpfDb2VsihJurzdTOvTval1f_kpYYfA9p5TvYIWWln5_FsVCZuYG3blC0rGVDt2KpEPwlNClOPG2fQA" }, { "id": "rich-class-realization", "category": "Class", "title": "Class: Realization (..|>)", "description": "Realization — dashed line with hollow triangle (implements interface).", "source": "classDiagram\n class Flyable {\n <>\n +fly() void\n }\n class Bird {\n +fly() void\n +sing() void\n }\n Bird ..|> Flyable", "options": {}, "renderUrl": "/examples/corpus/#rich-class-realization", "editorUrl": "/editor/#deflate:XY7BCoMwEER_ZdlTiyI9B8mhlH5FL9u4kYWYSBIFsf57iUUKHucxj5kVU5iiYVRoHKX0EOojDS8PsGd4uoXejmEtCKBtxWeOlgxr_UOVdcvlCnOQroDt794ldod4agFUSXx_9najaT762MUaR3Kcc3mINaa8uP1slDSWzNyhutVogrfSo1rRhGEkk1HlOPG2fQE" }, { "id": "rich-class-all-6-relationship-types", "category": "Class", "title": "Class: All 6 Relationship Types", "description": "Every relationship type in a single diagram for comparison.", "source": "classDiagram\n A <|-- B : inheritance\n C *-- D : composition\n E o-- F : aggregation\n G --> H : association\n I ..> J : dependency\n K ..|> L : realization", "options": {}, "renderUrl": "/examples/corpus/#rich-class-all-6-relationship-types", "editorUrl": "/editor/#deflate:Pc7LasMwEIXhVznMslim6yEYmqS5tH2EbgZ5og7YkpGURZrk3YsCzXLm48B_pZLO2Ssx-UlK2ZqELPN3BN6wujmHNRgWfzRblei1yQYvzmELhk_zkopVS7HBO5Jz2IEhIWQN8g97ODfg0KCU5O0JR_T9gA8wRl00jhr9pf0_0fe3AV9gZJXJfh8L6miRSWttvdRRqZfpkZ6tLO1WHYlfO_IpniwQX6kViq_ENZ_1fv8D" }, { "id": "rich-class-relationship-labels", "category": "Class", "title": "Class: Relationship Labels", "description": "Labeled relationships between classes with descriptive text.", "source": "classDiagram\n class Teacher {\n +String name\n }\n class Student {\n +String name\n }\n class Course {\n +String title\n }\n Teacher --> Course : teaches\n Student --> Course : enrolled in", "options": {}, "renderUrl": "/examples/corpus/#rich-class-relationship-labels", "editorUrl": "/editor/#deflate:jY-xCsMwDER_RWhtAp09dGn_IB27GFtNDY4cJHkoIf9eHAihnTreuwfHLailSiB0GLJXvSU_ip8eDLBluJMPLxJYGgI4DSaJR2A_USPrYQ5WI7H9YV5LFaVf0ZLlw9x3-_6y-w5sg9r6fe2rJ5aSM0VIjB3OPpNZu4Ydqr3z9lKSzi0TRXTnDkPhZxrRLRjKNPtg6EwqresH" }, { "id": "rich-class-design-pattern-observer", "category": "Class", "title": "Class: Design Pattern — Observer", "description": "The Observer (publish-subscribe) design pattern with interface + concrete implementations.", "source": "classDiagram\n class Subject {\n <>\n +attach(Observer) void\n +detach(Observer) void\n +notify() void\n }\n class Observer {\n <>\n +update() void\n }\n class EventEmitter {\n -List~Observer~ observers\n +attach(Observer) void\n +detach(Observer) void\n +notify() void\n }\n class Logger {\n +update() void\n }\n class Alerter {\n +update() void\n }\n Subject <|.. EventEmitter\n Observer <|.. Logger\n Observer <|.. Alerter\n EventEmitter --> Observer", "options": {}, "renderUrl": "/examples/corpus/#rich-class-design-pattern-observer", "editorUrl": "/editor/#deflate:tVI9j4MwDP0rkadWhaozQkgnXbdKN9zaxQ2GywkSlBikisJvr8JHadVrt9vi92y_Z8ctOFNbSRCBLNC5T4W5xfKohRhi8V2ffkmyaD0kRBwrzWQzlJQkI7RBZpQ_q6-TI9uQXYvGqHTiUnrNacMqO68WrFtk54J3unWVItPf9fuGNO9Lxbz0CA_KcT937oWZXu4f5ziYPF8cvLX8UZC9c_sid_6P-LLdPkzpydvWBnbUfsYnIU88rCkMk1smBFBhQcz-MiAAx-diOBKrXOVjohSiXQDS6EzlELUgTVmhZIjY1tR1Vw" }, { "id": "rich-class-mvc-architecture", "category": "Class", "title": "Class: MVC Architecture", "description": "Model-View-Controller pattern showing relationships between layers.", "source": "classDiagram\n class Model {\n -data Map\n +getData() Map\n +setData(key, val) void\n +notify() void\n }\n class View {\n -model Model\n +render() void\n +update() void\n }\n class Controller {\n -model Model\n -view View\n +handleInput(event) void\n +updateModel(data) void\n }\n Controller --> Model : updates\n Controller --> View : refreshes\n View --> Model : reads\n Model ..> View : notifies", "options": {}, "renderUrl": "/examples/corpus/#rich-class-mvc-architecture", "editorUrl": "/editor/#deflate:dZExb4QwDIX_iuWJ08Gpc4YuvaXDrTd1sYjhooYEJYYKIf57lYDuUEVHP_v5k59njH4INaPC2lKMV0NtoO7LAeQabl6zhTkJAJUmIbhRv5bnluVKQsVpp8VN--aphJHsCUZv9NZ0XkwzFS9teZHuhn-eoC5jM3yzBnaaw84KcB56TcLH6z68k-Ct5fD_0mpMzATeFj7Iacufrh-k4JGdHOCyv0hJ_OHuiFX1viWnYHXFg4l8sYLATeD4WEeytrcHJp07q3C5PH05TMMRS-zJskj6IpYYZbL5ocHEPtXMGtVbibV3jWlRzVj7rqdaUEkYeFl-AQ" }, { "id": "rich-class-full-hierarchy", "category": "Class", "title": "Class: Full Hierarchy", "description": "A complete class hierarchy with abstract base, interfaces, and concrete classes.", "source": "classDiagram\n class Animal {\n <>\n +String name\n +int age\n +eat() void\n +sleep() void\n }\n class Mammal {\n +bool warmBlooded\n +nurse() void\n }\n class Bird {\n +bool canFly\n +layEggs() void\n }\n class Dog {\n +String breed\n +bark() void\n }\n class Cat {\n +bool isIndoor\n +purr() void\n }\n class Parrot {\n +String vocabulary\n +speak() void\n }\n Animal <|-- Mammal\n Animal <|-- Bird\n Mammal <|-- Dog\n Mammal <|-- Cat\n Bird <|-- Parrot", "options": {}, "renderUrl": "/examples/corpus/#rich-class-full-hierarchy", "editorUrl": "/editor/#deflate:bZJLa8QwDIT_ivGpZbPQcwgL3Uehh0Kh114URzWmtmVkZ0tI899Lss6-muN8MBp5rF5GalmhLKWyEOPegGZwn16ISYtnbxxY0Y9EiKqCOiYGlTabE1l9JDZeCw8OMzE-CdCzQkgPj-JIpskgWsRwhYZL2Bu4q7BVTWTFD7DbWqIG5wG-5YjLA7aGm1u7Av9iu0wsdAet47J3T_pszY-qGc-pNfD3snEH6TbTxFffEHFmoWVedr4DM13MOfVICurWAs9rx4DwLzt_TPW7Xufe7ulYxshyqxPbk75HO0gjmqqbwGkrWcgAFlMab0MWMqbOTmfCJoZRIzayfCqkIv9ltCx7qcgFUEmWiVschj8" }, { "id": "rich-er-basic-relationship", "category": "ER", "title": "ER: Basic Relationship", "description": "A simple one-to-many relationship between two entities.", "source": "erDiagram\n CUSTOMER ||--o{ ORDER : places", "options": {}, "renderUrl": "/examples/corpus/#rich-er-basic-relationship", "editorUrl": "/editor/#deflate:FcuxCsMgFEbhV7n8s4HOrk3GErDt1uVyexsEE0XNEEzevbidbzgNJe5ZFBaaR89L5vWzEd3fz9f8mByd5zDERrMbJ0eWUmDRAoPEQWvtHwxKPUJPyb6kbtUv7M1A4vbzC2yDxDWxVNiad72uPw" }, { "id": "rich-er-entity-with-attributes", "category": "ER", "title": "ER: Entity with Attributes", "description": "An entity with typed attributes and `PK`/`FK`/`UK` key badges.", "source": "erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n date created_at\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-er-entity-with-attributes", "editorUrl": "/editor/#deflate:VY2xCgIxEAV_Zdk6hXVatRJR1OsEWZL1WLjkwmavOML9uwRt7N4MA69hnRcNjB5ZD0KjUnpmgP1wf1zOxxu0TgCSDSTC9fTFaip5hEyJ_wQnkgmGXxXJGIIyGccXWZcbOiw0sVm_RIfV1qnPoFJLZ-aIfucwzPktI_qGYU6FgqE3XXjbPg" }, { "id": "rich-er-attribute-keys-pk-fk-uk", "category": "ER", "title": "ER: Attribute Keys (PK, FK, UK)", "description": "All three key constraint types rendered as badges.", "source": "erDiagram\n ORDER {\n int id PK\n int customer_id FK\n string invoice_number UK\n decimal total\n date order_date\n string status\n }", "options": {}, "renderUrl": "/examples/corpus/#rich-er-attribute-keys-pk-fk-uk", "editorUrl": "/editor/#deflate:VY49C8JAEET_yrJ1Cuur1cZCCdgJ4dxbw8J9hL09QUL-uxwExO7NGxhmxVqaEqND1qP4WX16ZIDreDyNsHYEkGwgAW6XX6RWrSTWSQKcd19NJc8g-V2EeMotPVnhvreBSZKPYMV83JU3hqKBder4t1LNW6tdbTjg4iOb9Zc4YLVP7EgqdemZOaA7DEglv2RGtyKVtHgydKaNt-0L" }, { "id": "rich-er-exactly-one-to-exactly-one", "category": "ER", "title": "ER: Exactly One to Exactly One (||--||)", "description": "One-to-one mandatory relationship.", "source": "erDiagram\n PERSON ||--|| PASSPORT : has", "options": {}, "renderUrl": "/examples/corpus/#rich-er-exactly-one-to-exactly-one", "editorUrl": "/editor/#deflate:FcuxCsIwFEbhV7n8cwrOdxN0taFxdLnEaw20TUjSQZq-u2Q733AOlLhnr2BovgWZs6yvjcjeJzc-qLVhaI3s1Tk7Tk9i-kqBQZJFa-0XDEr9LT19DiV1q77BFwMft0-YwQd8XJP4Cq551_P8Aw" }, { "id": "rich-er-exactly-one-to-zero-or-many-o", "category": "ER", "title": "ER: Exactly One to Zero-or-Many (||--o{)", "description": "Classic one-to-many optional relationship (crow's foot).", "source": "erDiagram\n CUSTOMER ||--o{ ORDER : places", "options": {}, "renderUrl": "/examples/corpus/#rich-er-exactly-one-to-zero-or-many-o", "editorUrl": "/editor/#deflate:FcuxCsMgFEbhV7n8s4HOrk3GErDt1uVyexsEE0XNEEzevbidbzgNJe5ZFBaaR89L5vWzEd3fz9f8mByd5zDERrMbJ0eWUmDRAoPEQWvtHwxKPUJPyb6kbtUv7M1A4vbzC2yDxDWxVNiad72uPw" }, { "id": "rich-er-zero-or-one-to-one-or-many-o", "category": "ER", "title": "ER: Zero-or-One to One-or-Many (|o--|{)", "description": "Optional on one side, at-least-one on the other.", "source": "erDiagram\n SUPERVISOR |o--|{ EMPLOYEE : manages", "options": {}, "renderUrl": "/examples/corpus/#rich-er-zero-or-one-to-one-or-many-o", "editorUrl": "/editor/#deflate:Fcu9CsMgFIbhW5FvNtDZuQ6FloSEFApdDvZUhPiDmqGY3Htxe5_hbShxz4ahwPnqyGby7yDEsk56ft6WcRZHHIajCf2Y7uNLa6GEp0CWCyQSbVxrvyFR6m_rabIrqZv5A3WRMDF8nYVqMNEnMhWq5p3P8w8" }, { "id": "rich-er-one-or-more-to-zero-or-many-o", "category": "ER", "title": "ER: One-or-More to Zero-or-Many (}|--o{)", "description": "At-least-one to zero-or-many relationship.", "source": "erDiagram\n TEACHER }|--o{ COURSE : teaches", "options": {}, "renderUrl": "/examples/corpus/#rich-er-one-or-more-to-zero-or-many-o", "editorUrl": "/editor/#deflate:FcuxCsIwFEbhV7n8cwrO2aQG3IRqN5dwvdZA24TkdpCYd5ds5xtORYlHZoGF5EvwS_bbcyd6uPN4dRO13zDESuNtnu6OLKl4_kiBQfKrqPYRBkW_a0_OoaRukRfsyYDj_g4LbAXHLXlWWM2HtPYH" }, { "id": "rich-er-all-cardinality-types", "category": "ER", "title": "ER: All Cardinality Types", "description": "Every cardinality combination in one diagram.", "source": "erDiagram\n A ||--|| B : one-to-one\n C ||--o{ D : one-to-many\n E |o--|{ F : opt-to-many\n G }|--o{ H : many-to-many", "options": {}, "renderUrl": "/examples/corpus/#rich-er-all-cardinality-types", "editorUrl": "/editor/#deflate:Tc49CsMwDAXgqwjNMXT21jT9OUQX46rBEFvGUYZg--5FLaXd9N7HA1VceSue0CKVKbi5uHhPAEdozZjWYAQLnMgIG06kdHoTV5h-FF3a1c7Q2JhW4aKW5d-u0D-7G1jQ8os4YHYLiegXOOAq-6KnL2HNmokeaA8Dek7PMKOt6Dlm5wWtlI16fwE" }, { "id": "rich-er-identifying-solid-relationship", "category": "ER", "title": "ER: Identifying (Solid) Relationship", "description": "Solid line indicating an identifying relationship (child depends on parent for identity).", "source": "erDiagram\n ORDER ||--|{ LINE_ITEM : contains", "options": {}, "renderUrl": "/examples/corpus/#rich-er-identifying-solid-relationship", "editorUrl": "/editor/#deflate:Fcu9CsMgFIbhWzl8cwKdneMQ6A-EjoUip6dBSFT0ZCiaey9u7zO8FSUemQUGkifv1uz2VyB6LJNdqLVxbJWu892-56e9kSGOQZ0PBQOS20S1rxhQ9Lf15OxL6hb5wFwGcAxfv8JUcNyTY4XRfMh5_gE" }, { "id": "rich-er-non-identifying-dashed-relationship", "category": "ER", "title": "ER: Non-Identifying (Dashed) Relationship", "description": "Dashed line indicating a non-identifying relationship.", "source": "erDiagram\n USER ||..o{ LOG_ENTRY : generates\n USER ||..o{ SESSION : opens", "options": {}, "renderUrl": "/examples/corpus/#rich-er-non-identifying-dashed-relationship", "editorUrl": "/editor/#deflate:XYyxCsIwEEB_5bi5FOfMBhGkhaYOgiAhniHQJuFyHSTtv0tWt_fg8SqWtLEjVEh8DtazXZ8R4G70BPve96nCbby89DBPD1DgKRJbofIfGW3MdRxAQcoUC3aY7UIi7YwdFvkuDR2HkpsTvVGdOnQpfoJHVdGlNVsnqIQ3Oo4f" }, { "id": "rich-er-mixed-identifying-non-identifying", "category": "ER", "title": "ER: Mixed Identifying & Non-Identifying", "description": "Both solid and dashed lines in the same diagram.", "source": "erDiagram\n ORDER ||--|{ LINE_ITEM : contains\n ORDER ||..o{ SHIPMENT : ships-via\n PRODUCT ||--o{ LINE_ITEM : includes\n PRODUCT ||..o{ REVIEW : receives", "options": {}, "renderUrl": "/examples/corpus/#rich-er-mixed-identifying-non-identifying", "editorUrl": "/editor/#deflate:Vc5PC4JAEIfhrzLMWaXzXnMhIf-wWV2CWNapFnRXdlch1O8eeqlu84OXh5nQ28EpQobkUi2fTnY3A1CKlAuY5zieJzhmBb9nNc-BgbImSG38b5QkdoLTIatyXtTAwL907-NRyzWqRJme9_Vm2X9LG9UODW3WN9s0wS8ZvwIDR4r0SB4j7GVLIayvYoQ-vNv1VE77ft1EDbJdhMqah34im1DZrpcqIAtuoGX5AA" }, { "id": "rich-er-e-commerce-schema", "category": "ER", "title": "ER: E-Commerce Schema", "description": "Full e-commerce database schema with customers, orders, products, and line items.", "source": "erDiagram\n CUSTOMER {\n int id PK\n string name\n string email UK\n }\n ORDER {\n int id PK\n date created\n int customer_id FK\n }\n PRODUCT {\n int id PK\n string name\n float price\n }\n LINE_ITEM {\n int id PK\n int order_id FK\n int product_id FK\n int quantity\n }\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE_ITEM : contains\n PRODUCT ||--o{ LINE_ITEM : includes", "options": {}, "renderUrl": "/examples/corpus/#rich-er-e-commerce-schema", "editorUrl": "/editor/#deflate:jZFfa8MgFMW_ysXnFPbsa5NB2bqULHkbFNHbIhi1en0oSb77sO2SbFDYi3iOh9_948CiS0Ei4wxDqcU5iP7LAmy7z7beVw0MWQFoS6AVHN7uMlLQ9gxW9PjLwF5oA90tNeWjbsqnECUIQQYUhGoJyBTJ9RiOWsHrAjo0ddlt2__2czJOEPigJc6I991Hddy11f4JJEsX1Lr03fTBqSTpr31JwpKm61xgXto4bjZueAzPwRshMS7ryM_jsOqHg3SWhLa30M-oD8o6pq00SWFkBfPCIFH-OFawSFeTrzLo6LNGVIy_FEw6e9JnxgcmXe-FJMYpJJymbw" }, { "id": "rich-er-blog-platform-schema", "category": "ER", "title": "ER: Blog Platform Schema", "description": "Blog system with users, posts, comments, and tags.", "source": "erDiagram\n USER {\n int id PK\n string username UK\n string email UK\n date joined\n }\n POST {\n int id PK\n string title\n text content\n int author_id FK\n date published\n }\n COMMENT {\n int id PK\n text body\n int post_id FK\n int user_id FK\n date created\n }\n TAG {\n int id PK\n string name UK\n }\n USER ||--o{ POST : writes\n USER ||--o{ COMMENT : authors\n POST ||--o{ COMMENT : has\n POST }|--o{ TAG : tagged-with", "options": {}, "renderUrl": "/examples/corpus/#rich-er-blog-platform-schema", "editorUrl": "/editor/#deflate:fVHBTsMwDP0Vy-dW4pwbgsEBjU1suyGhLDGtpzapEldj6vrvKC3QwsQukf2e7efndBh9GwyhQgr3rIug61cHsNssXqBLEQA7AbawfhrTKIFdAW2k4HRNsPuNU625-gGtFoKDZ0c2AX161qvN9vpsYaloRIQ-BIx3Qk6mFt1K6cMbW3iYCzXtvuJYzrTuVsvl4vk_uWH43tvTxDY-ynxuwpLVCy0TSMtMaXv7eN3U7FhDw3Di8znPfTeeRMExsFD8S357UF-2h4Kh46Kg1BPZj2TaS4HooiCbH1lKzLDRFYmkT8cMo5yqFJrAsUk5kUV1k6Hx7p0LVB0aXzfaCCoJLfX9Jw" }, { "id": "rich-er-school-management-schema", "category": "ER", "title": "ER: School Management Schema", "description": "School system with students, teachers, courses, and enrollments.", "source": "erDiagram\n STUDENT {\n int id PK\n string name\n date dob\n string grade\n }\n TEACHER {\n int id PK\n string name\n string department\n }\n COURSE {\n int id PK\n string title\n int teacher_id FK\n int credits\n }\n ENROLLMENT {\n int id PK\n int student_id FK\n int course_id FK\n string semester\n float grade\n }\n TEACHER ||--o{ COURSE : teaches\n STUDENT ||--o{ ENROLLMENT : enrolled\n COURSE ||--o{ ENROLLMENT : has", "options": {}, "renderUrl": "/examples/corpus/#rich-er-school-management-schema", "editorUrl": "/editor/#deflate:jVHBasMwDP0VoXMLO_s22oxBu3ak6W0wPFtNDY4dZOUw0vz7SJO2GVvHLkLv6fF4klpMsWFDqJB46XTJunoLALtiv8w2BbQ9AHBBwFl4XQ0wCbtQQtAVDYTVQmDjx7dxydqe511fiuxx8Zzl_3UcCUu1ZqkoyNVosd3nu-xvH3Hi6SYQ0uZI_O4sPK1utGGyTtLVOdvk2_X65f7eLggkaSwF-eEVG040ZccoiSpKQjyQBx-13LnM6TSfx_aynxpTn-Nd3jFKJkEVUODoPdnJbX6THXXCGdbak0j_bpxhkk_ft4ZdqntMZFE9zNDEcHAlqhZNrGptBJVwQ133BQ" }, { "id": "rich-timeline-social-media-history", "category": "Timeline", "title": "Timeline: Social Media History", "description": "Mirrors Mermaid’s official introductory timeline example, with each period carrying its own color family.", "source": "timeline\n title History of Social Media Platform\n 2002 : LinkedIn\n 2004 : Facebook : Google\n 2005 : YouTube\n 2006 : Twitter", "options": {}, "renderUrl": "/examples/corpus/#rich-timeline-social-media-history", "editorUrl": "/editor/#deflate:NY7BisJAEER_pehzDkPY3UN_wKqwC4K5CF7GSUcaJ9Nh0mER8d-XiN6qHo-i7jTbUpMQk-soWYucCuDqWbDV2a3eYAMOljRm_EqvEfscfbA6rmYbQgvGj5ar9LvyQh9gfMckZ7MrGBuzS34OtyF8gnG0pVvOb_IFRven7lKpoSlmcV8fUUOz3_IaU9V5WrtITxwaSlYGvRDfKdk4xeTEXhd5PP4B" }, { "id": "rich-timeline-product-delivery-plan", "category": "Timeline", "title": "Timeline: Product Delivery Plan", "description": "Sectioned timeline with continuation events, matching the more advanced Mermaid Timeline examples.", "source": "timeline\n title Product Delivery Plan\n section Foundation\n 2022 Q4 : Research\n 2023 Q1 : Prototype\n section Launch\n 2023 Q3 : Private beta\n : Design system rollout\n 2024 Q1 : Public launch", "options": {}, "renderUrl": "/examples/corpus/#rich-timeline-product-delivery-plan", "editorUrl": "/editor/#deflate:TU-xrsIwDPwVy3MHKEyZEdMb4M0swTVgyY2rxEGqEP-OUhUJT-e78538wmI1E2NAl5FVEl8SgIsrwynbUMnhwCpPzjOcNKYmFyYXS3C0mobYYGP7Td_DeQ8B_rlwzPRY2R2ctxBanJvP09LwjfiLNf0ad4tRntEZruyxKd8JcOAi9wRlLs4jZFO16uvxfm2pVxUCXXKxwykqu7cHscPiszZIWcrUduYBw6ZDsnSTO4YXko1TJMfgufL7_QE" }, { "id": "rich-timeline-multiline-platform-milestones", "category": "Timeline", "title": "Timeline: Multiline Platform Milestones", "description": "Exercises
labels in the title, section labels, periods, and event cards.", "source": "timeline\n title Platform
Milestones\n section Core
platform\n 2024
Q1 : Soft
launch\n 2024
Q2 : Mobile
support\n section Adoption\n 2024
Q4 : Team
rollout", "options": {}, "renderUrl": "/examples/corpus/#rich-timeline-multiline-platform-milestones", "editorUrl": "/editor/#deflate:VY8xCwIxDIX_Ssh8w3k4FRHEWVB0dOnVnBZyTWnTQcT_LjkcdHsvX_J4eWGVVgKhQ40zcUx0TQAalQmO7HWSMm_Gsj1EpqqSqBqvFDRKgr0UMpq_m8aGfljb7LQCB2eZ1Az7lsLjDw_g4CBj5CWhtpyl6G_47ibZxN_VGhxcyC-dijBLU-wweyZV-wI7rPpkk6HEms0T3dD1HQZJU7yje2GQOfug6LQ0er8_" }, { "id": "rich-journey-my-working-day", "category": "Journey", "title": "Journey: My Working Day", "description": "Scored tasks grouped into sections with actor tags and accessibility metadata.", "source": "journey\n accTitle: My working day journey\n accDescr: A compact user journey showing commute and workday tasks\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n section Workday\n Do work: 1: Me, Cat\n Review PRs: 4: Me, Team", "options": {}, "renderUrl": "/examples/corpus/#rich-journey-my-working-day", "editorUrl": "/editor/#deflate:XZAxa8MwEIX_yuNmDy1tFm2lgUyGEgJdugj5mqq2JaM71ZiQ_14UVRSy6e57-h7chSTm5JgMfcecAm8fAQCscyevExv0G9aYRh_OGOyG-9SexSWDF7g4L9YpsnBqKchXXMtPF-c5K8OG4WYrJrUySvVoqbprqkTYqY8BhwiNN1z3QG9HhrI12Bn03NaHiLyIWp_E4OmfNNF7bW_xfZUaPJZoh1erDR35x_OKt6MYPFd6YjtTR4udWLXcjDoS3abydMnLUmbmgcxDRy6GT38mc6G_05DRlPl6_QU" }, { "id": "rich-journey-mermaid-docs-example", "category": "Journey", "title": "Journey: Mermaid Docs Example", "description": "Official Mermaid user journey example, matching the docs structure and scoring pattern.", "source": "journey\n title My working day\n section Go to work\n Make tea: 5: Me\n Go upstairs: 3: Me\n Do work: 1: Me, Cat\n section Go home\n Go downstairs: 5: Me\n Sit down: 3: Me", "options": {}, "renderUrl": "/examples/corpus/#rich-journey-mermaid-docs-example", "editorUrl": "/editor/#deflate:ZY8xC8IwEIX_yuPmDoq4ZFVw6uTqEtJTozUXkgullP53iVVQ3O7ex72PmyhLSY7J0E1KCjyeAgCo157Rjhgk3X24oLNvktmpl4CDQOWFlxxo7Z2hbA22Bi1_4oOgxKzWp2yw-Sb75d5gXdMGO6t_jqs8vps6GcKn68dy9PqCbwU1FG3PqvUzaijr2NfRJZ9j3Zk7MquGnISzv5CZyMkjWqdkNBWe5yc" }, { "id": "rich-journey-cross-functional-release-readiness", "category": "Journey", "title": "Journey: Cross-functional Release Readiness", "description": "Ten peer actors coordinate a four-stage launch, making the high-cardinality actor palette visible without changing authored status or score semantics.", "source": "journey\n title Cross-functional release readiness\n section Plan\n Scope launch: 5: Product, Design\n section Build\n Ship product: 4: Web, API\n Instrument events: 4: Data, Mobile\n section Validate\n Prove release: 5: QA, Security\n section Release\n Publish rollout: 5: Docs, Support", "options": {}, "palettePeers": { "count": 10, "kind": "peer actors" }, "renderUrl": "/examples/corpus/#rich-journey-cross-functional-release-readiness", "editorUrl": "/editor/#deflate:VZCxagMxDIZfRXh2oUO7eEt7S4ZC2oN26eLzKYmLIhlLDoSQdy93lwSySeL7hH6dnUqrCV1wf9Iq4-mXAQAsGyG8V1F92jZOloUjQUXCqAgV45gZVRdacQZgQ5GXCUCfpCBQbJz2AV4DbKqMLZmHDjXv-NF8a5nGu7rPBcqCB3gJ8IODh9VmfQPWrFbbAdkAj8imM9VFix4-ZMiEj9u_I-Ux2nUK0ynHKcQcZj7uc-Whx9RqtusHbu7XQt3VNlDWPVQhkmaz3ElSD30rRao570okNJt-6rxTO9FUppq1TD3i6MKzd0l4m3cunF2SQ4nJXLDa8HL5Bw" }, { "id": "rich-xy-simple-bar-chart", "category": "XY Chart", "title": "XY: Simple Bar Chart", "description": "Basic bar chart with categorical x-axis.", "source": "xychart-beta\n title \"Product Sales\"\n x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]\n bar [150, 230, 180, 95, 310]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-simple-bar-chart", "editorUrl": "/editor/#deflate:NY7BasNADAV_ReiswLoh0Ppc6LWQQA5xDsqu6qjYXrOSi5OQfw_G9DbD8OA90PJUomCN8y1eufjmIs7NAADg6p1Ag98lpyk67LkTa3CN84ZnNTgdNbXiRvDF_6D3PhvBZ86JkxEcrjq03POvtnZe1xcucKp2geBtGwiq90DwsSPYVuGMhCN34r68QkLzW7dgLGrj4iIJ60AY8_CjLdYP1MGlcHT9E6y9TLLEfuToqz6fLw" }, { "id": "rich-xy-line-chart", "category": "XY Chart", "title": "XY: Line Chart", "description": "Line chart showing revenue growth over years.", "source": "xychart-beta\n title \"Revenue Growth\"\n x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]\n line [320, 420, 540, 680, 820, 950, 1080, 1200]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-line-chart", "editorUrl": "/editor/#deflate:Jc7BCsIwDAbgVwk5V0jrJnMv4N2r81Br1MLsRpfpRHx3SXf5yM-fQL44DXMOjC0un_DwWTYXFt8lAACJ0jN0eOQXp5nhkIe3PDpc22XjlzjByZFtDDiye9VR0RZdcVusivV5Pe5jYjhtdbtS6ooM7Boy0Gjc12TAkmbriM5ocPQ9i-ijaHCST69jyHEaNTNfsSWDYUi3eMf2izEJZx8kvhhbyTNr-Rx9kDX-fn8" }, { "id": "rich-xy-bar-and-line-overlay", "category": "XY Chart", "title": "XY: Bar and Line Overlay", "description": "Bars with a line overlay and both axis titles.", "source": "xychart-beta\n title \"Monthly Revenue\"\n x-axis \"Month\" [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Revenue (USD)\" 0 --> 10000\n bar [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]\n line [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-bar-and-line-overlay", "editorUrl": "/editor/#deflate:rZBBa8JAEIX_yjCnFiawijaaQ0GQHgRbqPRketisU13YbsJmEhLE_152o_-gl4-Z94b3YK7Y1l0wjAUOo7noIFnFoksPACBWHEOJ-9rLxY3wyT37jkuc7CHTg20ffolw3GlP8MYVwV4Hgk0T4jQS7Dof4Qg23ZngwA3BhxGC97on2LL5niLHR-S9Cp6-DtvnEkFBlr3CTCmlpstKBzgu5koRLFXiKvJlUpaRedLzpOdJXy0SZ5Hr5K7nSt27nfX8b5FI2GjHIvGzSNjK6OJogm2buDOfsFCEpvY_9ozFFa0XDtqI7RkLCR1H87fRRqb1dvsD" }, { "id": "rich-xy-horizontal-bars", "category": "XY Chart", "title": "XY: Horizontal Bars", "description": "Horizontal bar chart showing language popularity.", "source": "xychart-beta horizontal\n title \"Language Popularity\"\n x-axis [Python, JavaScript, Java, Go, Rust]\n bar [30, 25, 20, 12, 8]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-horizontal-bars", "editorUrl": "/editor/#deflate:JY7BasNADER_ReisgOtSCP6BQukhtMc4B2Wr2oLt7qLVBjsh_16Mb-8xMzAPrLlZEBxwWcPM5oerOMOcTe85OccxAQC4ehQY8ZPT1HgSOOXSIpv6OuJeWQ68aIXzafU5J4IPvvF3MC2-M8F7Jvhq1S_74MoG59eOoH8j6DuCl57geEHCwlHct1NIWH2NGwbTWjYX-cGhIww5_eqEwwM1uRgH15vg4NZkC_8KB9_1-fwH" }, { "id": "rich-xy-multiple-bar-series", "category": "XY Chart", "title": "XY: Multiple Bar Series", "description": "Two bar series comparing years side by side.", "source": "xychart-beta\n title \"2023 vs 2024 Sales\"\n x-axis [Q1, Q2, Q3, Q4]\n bar [200, 250, 300, 280]\n bar [230, 280, 320, 350]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-multiple-bar-series", "editorUrl": "/editor/#deflate:VY7BCoMwEER_ZdnzCmmiUPwL6bF6iOm2DViVZBVF_PeS5tTLMDNvDnNgnJbgGGvcdve2QYqexbYjAIB4GRha1EobWCNopUu42YFji3mxFXbzEe7NhaDRBI0haMouw94GuGulCHSlCMzPXdUfNbkjMDpJpToknO3AIukTEkbZh2Rd8HFOmfmBtSJ00_j0L6wP9KNwsE78ylhLWDjBz2yd5HieXw" }, { "id": "rich-xy-dual-lines", "category": "XY Chart", "title": "XY: Dual Lines", "description": "Two lines comparing planned vs actual values.", "source": "xychart-beta\n title \"Planned vs Actual\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]\n line [100, 145, 190, 240, 280, 320, 360, 400]\n line [90, 130, 185, 235, 275, 340, 380, 420]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-dual-lines", "editorUrl": "/editor/#deflate:VY8xa8MwEIX_ynHzBWTLblNvXjoECt3jDIpyTQWKYqRTsAn57-Xw1OXjPe59wz2x3Gv2jAMuq_91WXZnFjclAAAJEhkm_I4uJb7Ao8Dopbo44TZYdm4JBY4Hlwg--Uzw5TLBOGdNK8GhJkUkGOv1tEkxJIZjYwxB0_UEzYchaDvF3hDYVvFmCDpj_im6a6xi3xO0VvHeE1h1rbpda05IOLvIIvoTEhZZo0afQ5m1M19wMIT-nn7CFYcnhiScnZfwYBwkV9bjbXZetvp6_QE" }, { "id": "rich-xy-numeric-x-axis", "category": "XY Chart", "title": "XY: Numeric X-Axis", "description": "Line chart using a numeric x-axis range.", "source": "xychart-beta\n title \"Distribution Curve\"\n x-axis 0 --> 100\n line [4, 7, 13, 21, 31, 43, 58, 71, 84, 91, 95, 91, 84, 71, 58, 43, 31, 21, 13, 7, 4]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-numeric-x-axis", "editorUrl": "/editor/#deflate:JY7BasNADER_ZdBZBm_t4MSHXtq_qHvYbNVW4K7NrhwcQv69CJ-kmXkD86C6bCUJjbTf028s1lzF4pQBwNRmwUTvWq3odTNdMt62cpOJDmJv4q4VLZrmFaFtD3fWLPjoGQMjdIyXwOgCo-8YpzNjCIxzz7gExuV0XNfue-6c897z_sDoP4lpjbOY-VZiqnaf_U1F6-pa5IvGlikt-Vt_aHyQZpMSk-lNaLSyiYd_a0x2yOfzHw" }, { "id": "rich-xy-12-month-dataset", "category": "XY Chart", "title": "XY: 12-Month Dataset", "description": "Full year monthly data with bar and trend line.", "source": "xychart-beta\n title \"Monthly Active Users (2024)\"\n x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]\n y-axis \"Users\" 0 --> 30000\n bar [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]\n line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-12-month-dataset", "editorUrl": "/editor/#deflate:tVDBasMwDP0VodMGCihuO7ocBoWxQ6HbYezU7OB6WmvInOAopaH034ft_cIuenpP0nugK479FJ1gg5fZnWzU6iBq2wAAoF47gRZ3fdBTN8PGqT8LfIwSR7gzbJb3LZbVS2UvfoT91gaCFzkQ7Gwk2AwxdTPBdgqpdASb6UjwLgPBm1OC1_5M8CzusxjNxajFnNIiMFTVEyyYmcvGwUbY14aZCerFKsPKZHhYZ1hn0XCd2WMWTV3EZERglvnArMpszcx_-Z0P8i_2SDjYTlTTr5Fw1LlLrYt-HBIX-cKGCV0fvv0Rmyv6oBJtfjo2GidJw5_BOi30dvsF" }, { "id": "rich-xy-horizontal-combined", "category": "XY Chart", "title": "XY: Horizontal Combined", "description": "Horizontal chart with both bars and a trend line.", "source": "xychart-beta horizontal\n title \"Budget vs Actual\"\n x-axis [Eng, Sales, Marketing, Product, Ops, HR, Finance, Legal]\n bar [500, 350, 250, 200, 150, 120, 100, 80]\n line [480, 380, 230, 180, 160, 110, 95, 75]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-horizontal-combined", "editorUrl": "/editor/#deflate:LY_BTsNADER_xfLZlZKWQMkNJBAHEAiOSQ_uxqQrlk2061QpVf8dmXB5mvF4LPmMeZiSE6xxPrkDJ13tRRkOQ_I_Q1QObQQAUK9BoMX7qetF4ZjhzunEocUln1c8-wzNQ-wJPjhIJnjh9CXqbfKWhm5ySvA6ZoKnd4JHHzk6IXiWnsNuubLnBE1VFASbqiBY_8FsaapcG8xui_9C8FGgudpaw7De2Iqp8tpQFgS3FcFNtUPCkYOo2q9ImPUUTLrk82hepMO6IHRD_PQ91mf0USWxU38UrDVNYuH3yE4Xe7n8Ag" }, { "id": "rich-xy-sprint-burndown", "category": "XY Chart", "title": "XY: Sprint Burndown", "description": "Sprint burndown chart with actual and ideal lines.", "source": "xychart-beta\n title \"Sprint Burndown\"\n x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]\n y-axis \"Story Points\" 0 --> 80\n line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]\n line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]", "options": { "interactive": true }, "renderUrl": "/examples/corpus/#rich-xy-sprint-burndown", "editorUrl": "/editor/#deflate:dc9NasMwEAXgqzxmPQZZ_onjRRZFByhkGWehKmorcGUjjxubkLsX43bZ3TzefAPzoGmYk_PU0rK6T5ske_NiuwgAEqT36Og8phAFL3OKt-EeO9rrJbNLmHAxOcNohikYpmSYimFqhjkwTMMwR4bJ1XVX6646OsuQVrwOIcrUERSy7IRG7Vt9iB6Xg2bUFaNqGJVilBWjaBiFYmjNyDXj7-4_omAUNUMff0W5CWIabe9Ftr-JaZK130aXwjRu2fsbtYrJDfE9fFD7oBDFJ-skfHtqJc1-K79G62SPz-cP" }, { "id": "rich-xy-service-health-portfolio", "category": "XY Chart", "title": "XY: Service Health Portfolio", "description": "Eight peer service series share one operational scale, exposing whether line and legend colors remain distinguishable above the legacy six-series boundary.", "source": "xychart-beta\n title \"Service Health Portfolio\"\n x-axis [Mon, Tue, Wed, Thu, Fri, Sat]\n y-axis \"Availability (%)\" 80 --> 100\n line Web [99, 98, 99, 99, 100, 99]\n line API [96, 97, 98, 97, 99, 98]\n line Data [93, 95, 94, 96, 97, 96]\n line Mobile [89, 92, 93, 91, 95, 94]\n line Identity [98, 96, 95, 97, 96, 98]\n line Search [86, 88, 91, 93, 92, 95]\n line Billing [94, 93, 96, 95, 98, 97]\n line Notifications [82, 87, 85, 90, 89, 93]", "options": { "interactive": true }, "palettePeers": { "count": 8, "kind": "peer series" }, "renderUrl": "/examples/corpus/#rich-xy-service-health-portfolio", "editorUrl": "/editor/#deflate:XdFRSyMxEAfwr_IncODBFNZ61k0fhIoc54OHUMGHbB_SdGoH4qZkp6VF_O5Hdk9ZfEpCfvOfDHk3XTrkwGZuTuew81kna1bftACgopHRmCXnowTGH_ZRd3hKWbcpSmrM4E4Tf5IO7jG1hOcDE154Q3jeHQi_sxCWXlcDPQ-0MYujl-jXEkXPuPjxszGoK0wmt7isqsFGaRkvvIazlmBrQr9aKqRsViO3eHqAszOCvflvy9rXjdm9Vw9nrwj2mmB_Eb5qZmP3mNYSGa4uCVNCX3H5WTWWDxtutQzh-q4lrZg-8Xv3JfscdnD1jFAXXRJLculwPZZ3EqO0r3D9Ewv5DO5HG9O_SWUrwauktoOrp4T6hlAXXBH6Ca5WhszeR1YtX23IdHqOZRuydPtyZt6YeUUmpHYrr2b-bqRVzj6oHNnMNR-4XL7tfdDh-PHxDw" }, { "id": "rich-pie-pets-adopted", "category": "Pie", "title": "Pie: Pets Adopted", "description": "A basic pie chart with a title and three labelled slices.", "source": "pie title Pets adopted by volunteers\n \"Dogs\" : 386\n \"Cats\" : 85\n \"Rats\" : 15", "options": {}, "renderUrl": "/examples/corpus/#rich-pie-pets-adopted", "editorUrl": "/editor/#deflate:Nc2xCsMgFIXhV7mc2aGlpATX9gFK5yxWb4NgVfRaCCHvXqS4nf9bzo6aWrEMjeyZxEtgerBUMi5lYUevjb4ptCjMpS6RiGjBPa11AWm6zNdhNyN_m6dBz0HnCQrZBBbpV1CosoU-bfE192Z20CcFm-Lbr9A7bPpkYwVaSuPj-AE" }, { "id": "rich-pie-product-elements-showdata", "category": "Pie", "title": "Pie: Product Elements (showData)", "description": "A pie chart using `showData` to surface the raw value beside each legend label, with decimal slice values.", "source": "pie showData\n title Key elements in Product X\n \"Calcium\" : 42.96\n \"Potassium\" : 50.05\n \"Magnesium\" : 10.01\n \"Iron\" : 5", "options": {}, "renderUrl": "/examples/corpus/#rich-pie-product-elements-showdata", "editorUrl": "/editor/#deflate:Pc4xC4MwEAXgv3LcLBJLLTRruxQpOHZwCfFqAzEJyYUi4n8vIul2j-89uBWTz1ETSgyGIH38965YDQ4AgA1bgo4WIEszOU5gHPTRj1kzvI7SgDdltcnzgCDhfKqvlwK9Z5VSoVbUoi30VJOjPzWiFk2hR_TuGGCFQVli3t_DChMvdj91NCnsmWhEKSrU3r3NhHJF7eegNKPkmGnbfg" }, { "id": "rich-pie-platform-workload-portfolio", "category": "Pie", "title": "Pie: Platform Workload Portfolio", "description": "Ten peer workload categories exercise high-cardinality slice and legend identity while preserving the values and source order authored by the user.", "source": "pie showData\n title Platform workload portfolio\n \"Web\" : 24\n \"API\" : 18\n \"Data\" : 14\n \"Mobile\" : 11\n \"Security\" : 9\n \"Infrastructure\" : 8\n \"Documentation\" : 6\n \"Support\" : 5\n \"Quality\" : 3\n \"Research\" : 2", "options": {}, "palettePeers": { "count": 10, "kind": "peer slices" }, "renderUrl": "/examples/corpus/#rich-pie-platform-workload-portfolio", "editorUrl": "/editor/#deflate:RdCxTgMxDAbgV7E830CBIrgNiaUDUgsDyy1u6qNRc3HkOKqqqu-OLqeULfns_IlzxSxFHWOPyTPko5w_yGiIAADmLTBsA9koOsFZ9BSEDpBEbZTgZWkb8If3A0IPj89N3rebKqvXJjW20r3pU_Y-8IKrht_sinq7VH5ruomjUjYtzoouR_6TxZWJo5F5ibX0cg8raX5sxXXDXaHQLnhq-MWZSd1xmQM7TBTYbP4Y7DDbJcxLpz6nec98wP6hQydx9L_YX9HJlMgZ9qaFb7c_" }, { "id": "rich-quadrant-reach-engagement", "category": "Quadrant", "title": "Quadrant: Reach & Engagement", "description": "The classic quadrant chart: campaigns plotted by reach (x) and engagement (y), with a label in each of the four quadrants.", "source": "quadrantChart\n title Reach and engagement of campaigns\n x-axis Low Reach --> High Reach\n y-axis Low Engagement --> High Engagement\n quadrant-1 We should expand\n quadrant-2 Need to promote\n quadrant-3 Re-evaluate\n quadrant-4 May be improved\n Campaign A: [0.3, 0.6]\n Campaign B: [0.45, 0.23]\n Campaign C: [0.57, 0.69]\n Campaign D: [0.78, 0.34]\n Campaign E: [0.40, 0.34]\n Campaign F: [0.35, 0.78]", "options": {}, "renderUrl": "/examples/corpus/#rich-quadrant-reach-engagement", "editorUrl": "/editor/#deflate:bZGxTsMwEIZf5eQ5qUKTkpIBCUIRAzB0YYAOh3NNLCW2sZ2SqOq7o8SlkQKbz993_53lI7OqNZxYxr5aLAxKl1do3IcEAHDC1QRbQl4BygJIllhSQ9KB2gPHRqMopfVyF2InLDyr73NHGN7CkygrX3qpn6TNFHYxpzuv_-4UXsEbga1UWxdAnUZZzIQlvBIV4BRooxrlaMZj2FJIB6xb_MMSeMEePglEo4060Dk7P78P7jJ4jxZxANHiejdj9yNLVgNcxnOaj3SVjq03c_ow0nQ90DiZ041Pjv6nj36ncW663rGAaazJueEnWcCs6-vhyI2weqiJCpZFAeNK7kXJsiPjqtHIHcucael0-gE" }, { "id": "rich-quadrant-effort-vs-value", "category": "Quadrant", "title": "Quadrant: Effort vs Value", "description": "A prioritization matrix — tasks plotted by effort and value to decide what to do, plan, delegate, or drop.", "source": "quadrantChart\n title Prioritization matrix\n x-axis Low Effort --> High Effort\n y-axis Low Value --> High Value\n quadrant-1 Do now\n quadrant-2 Plan\n quadrant-3 Drop\n quadrant-4 Delegate\n Onboarding revamp: [0.2, 0.9]\n Platform migration: [0.8, 0.8]\n Legacy cleanup: [0.25, 0.2]\n Vendor swap: [0.7, 0.3]", "options": {}, "renderUrl": "/examples/corpus/#rich-quadrant-effort-vs-value", "editorUrl": "/editor/#deflate:XdDBTsMwDAbgV7FybqfRgRg9cGFIHCbR0y6wg0ndLFIaF9elHdPeHXUtmrRb_t-fHCUn03InlkxuvjssBaO-HFD0MwIAqNdAUIhn8ep_UT1HqFHFDxMYUhx8C1vu4bWqWBTS9BnevDvMeWLHK9th6OiqLnFC__end7BhiNzf1BkUAeNNuYKNcHNT3sOGAjnUefN7_GKU0kcHQj9YNzl8LBdZAsvF034iRUCtWGqovZPLOy9mPZr1bLbk0B7BBsLYzTseRpDNYEexZIG2x2n6OA5Xe5OYBgOpjr9sEtPqMYxHK75txkxUmnyZGMux8s7kJ2O5btCqyVU6Op__AA" }, { "id": "rich-gantt-a-gantt-diagram", "category": "Gantt", "title": "Gantt: A Gantt Diagram", "description": "The classic Mermaid docs Gantt: sections, explicit dates, `after` dependencies, and inherited starts.", "source": "gantt\n title A Gantt Diagram\n dateFormat YYYY-MM-DD\n section Section\n A task :a1, 2014-01-01, 30d\n Another task :after a1, 20d\n section Another\n Task in Another :2014-01-12, 12d\n another task :24d", "options": {}, "renderUrl": "/examples/corpus/#rich-gantt-a-gantt-diagram", "editorUrl": "/editor/#deflate:XVA9i8MwDP0rQrMDdq6Tt0K4mzrdLYEuwlFz5hI72OpwlP73YpykpVqk98UD3TDHa3KMFkcKIucAACBeJoYjfBUKOk9jorlKAwl_xjSTQN_3fXM6NV1XpcxOfAzwXXclyxxBKP9tCMCSUdBqc2i0abRR8KGHF3eI8stpz1i6CCeomdW3Va3eZ_inhPwugN1qTKvAtC819F7THgZUuNDEIuUfqDDL_1ROl3xeCmYe0GqFLoaLH9He0MV5ISdoJV35fn8A" }, { "id": "rich-gantt-status-milestones", "category": "Gantt", "title": "Gantt: Status & Milestones", "description": "Status tags (`done`, `active`, `crit`), a milestone diamond, a `vert` marker that consumes no row, and weekends excluded from working durations.", "source": "gantt\n title Release train\n dateFormat YYYY-MM-DD\n excludes weekends\n section Build\n Completed task :done, des1, 2024-01-08, 2024-01-10\n Active task :active, des2, 2024-01-11, 3d\n Future task :des3, after des2, 5d\n section Ship\n Crit review :crit, rev1, after des3, 2d\n Code freeze :vert, v1, 2024-01-19, 0d\n Release :milestone, m1, after rev1, 0d", "options": {}, "renderUrl": "/examples/corpus/#rich-gantt-status-milestones", "editorUrl": "/editor/#deflate:VZHLbsMgEEV_ZcQaS9hupZZd2yi7bNqVpW4Q3KQo2FgwTtpG-ffKdh7urObB4V6Gk8hxSBZCi53pmD87IiL2HEDvCDAZxMn4bh44w1jH1BqmpmmaYrMpVqt5hG8bBodMR2CPzuW5nWHZx45eBx_c3BrjLbZ9AMMRm7wn7WIHSQ65lFSp6qFQZaGe7nmp7uyLZX_ADBKRNlM90dWCKCXVC8X1wENaUA65lmS2jHQhHy-nr5Y_vny_cJw8U8LB4zjxNnmWY6Nc3FJLqv690oG2CfjFxByQWNJI3Fw-S1IL4rrzS-jWB2SeltPehGZR5YQUvQlgHr9PSJH5J4ypTT73Yw04oZUUNnZbvxP6JGxse2NZaE4Dzuc_" }, { "id": "rich-gantt-compact-display-mode", "category": "Gantt", "title": "Gantt: Compact Display Mode", "description": "Dense overlapping tasks packed into shared rows with `displayMode: compact` — deterministic first-fit lanes per section.", "source": "---\ndisplayMode: compact\n---\ngantt\n title Compact packing\n dateFormat YYYY-MM-DD\n section Stream\n One :a, 2024-01-01, 5d\n Two :b, 2024-01-03, 6d\n Three :c, 2024-01-08, 4d\n Four :d, 2024-01-10, 3d", "options": {}, "renderUrl": "/examples/corpus/#rich-gantt-compact-display-mode", "editorUrl": "/editor/#deflate:TdAxa8MwEAXgv_K4WQI7SUvR2pDNdGgWgxdVuroitiTkMyGE_PfiuhDfdHfvm96dpjQXx2RIa91FH6Y82FuTPBu4NGbrpIt_UW-jSBcBQIIMjPc1RrbuEmK_Rt4Kn1IZraBt21Y3jT4e12hiJyFFfEphO66_ZT4iAzBWYVftDrqqdVUrvPinOF_TIr42Yq_wuhU_hRnGbcSbwmEjTmkugPFPUVcKe0-Ksh1YZOmAFE1yG5bVlTDl5Wb2ZCpFLsXv0JO5038vZKTM_Hj8Ag" }, { "id": "rich-mindmap-incident-response-command-map", "category": "Mindmap", "title": "Mindmap: Incident Response Command Map", "description": "A 40-node operational map with thirteen first-level branches for testing broad, real-world incident coordination.", "source": "mindmap\n accTitle: Incident response command map\n accDescr: A broad operational map with more than eleven second-level nodes\n root((Production incident))\n Detection\n Alerts\n Customer reports\n Triage\n Severity\n Scope\n Containment\n Feature flags\n Traffic shift\n Investigation\n Logs\n Traces\n Communications\n Status page\n Stakeholders\n Recovery\n Rollback\n Data repair\n Validation\n Synthetic checks\n Error budget\n Follow-up\n Timeline\n Action items\n Security\n Credentials\n Audit trail\n Vendors\n Cloud provider\n Payment processor\n Legal\n Notification duties\n Evidence hold\n Support\n Response macros\n Escalations\n Analytics\n Impact estimate\n Cohort analysis", "options": {}, "palettePeers": { "count": 13, "kind": "first-level branches" }, "renderUrl": "/examples/corpus/#rich-mindmap-incident-response-command-map", "editorUrl": "/editor/#deflate:VVPBTiMxDP0Va04gFWnPvVUFJCSEEK32tBfjuB2LJB45TlGF-PdVSmaAOcX2y_N7duZjKFqNeFgPSXJIOP3LAEi0F4-8hodMEjg7GJdJc2EgTQlzgG_oLReyNWzg1RQD6MSGLpoxNhC8i4-Q1Bh8xAwc-cQZCpPmcNOCCFkDl8Zmqn519WwaKjUKkN7_-rqVAW7Z-VL5CgE2kc0vd9u3rcU1sYHxpEt-b4JHnjE7PrGJn5eYdOrFrWZHyYmzz9V7Rq_GcIh4XNrsDQ8HISijHDryIZ-4uBwvzmfco_66Q18mW5-Uaha6gBfEztFrgemnVsc3HjUGtg57YdIT26L-RWN8RXqb41t0bO5R7Cv1F6OEX6p25-wjuxDQyPS29L8zU4PXGo7cTd1rjPp-U6fFhCSOkhd9m74l59Rpdkz153S3xm1_gnHps6lBHNxQYpfIOehsEGAbtQaYTE8SuLsAeMZz20vLE5eivfDIR-w0AE_qcuhjhVBd5oED3DWyTAxtml1qndojWSY5v_CEZPp9sRDGn4vaZIxnF1oQD2lCcmjrT-jLbLY6qjlggxcpw2qYMLJ7-9eG1VD8HNuRTMrUYuYwrP-sBtJ8kOOw_hhIL8zD2q3y5-d_" }, { "id": "rich-mindmap-multilingual-global-launch", "category": "Mindmap", "title": "Mindmap: Multilingual Global Launch", "description": "Long wrapped Markdown with CJK, Arabic, emoji grapheme clusters, ampersands, and comparison characters.", "source": "mindmap\n accTitle: Global launch knowledge map\n root((Global launch 🌍))\n research[\"`**Research findings** that include a deliberately long sentence requiring deterministic wrapping without losing words or grapheme clusters`\"]\n japanese[\"東京の利用者インタビューと製品フィードバック\"]\n arabic[\"ملاحظات المستخدمين وخطة الإطلاق\"]\n emoji[\"Families 👨‍👩‍👧‍👦 and flags 🇳🇬 🇯🇵\"]\n content[Content & localization]\n symbols[\"A < B & C > D\"]\n combining[\"naïve café — résumé\"]\n delivery{{Regional delivery}}\n Americas\n Europe\n Asia Pacific", "options": {}, "renderUrl": "/examples/corpus/#rich-mindmap-multilingual-global-launch", "editorUrl": "/editor/#deflate:VVJPTxNBFP8qL3Mg0HDw3BgTxD9XQ7ztmjCdfd0Ozs6sM7M0tWkCXSpoJJGAR9MDYinBNqYxGKPx0C8xe2VFOfYjmKXQ4Om935_5vZeZaRKjEs2QlEnEZRDR2JcAlLGn3Aosw2OhKlSAoIlkNXguVV1gECJcG7VSdn7-f9Ok-3Z3YaFQATQapJrVPJ-slkor1wiqXAZchqZUAlujFrhkIgkQKAQoeAU1tSgaIJQMwaC0KBmCxhcJ11yGEKBFHXHJjeUM6prGcUHXua2pxIJQ5goqHRhQGkJN4xpGCEwkxqI2qz55Nt0PYI3GVKJBzyd_Pnz5_f003xxc7PT_HhxfbnTy9sc8HeXtX3m6n6dHefoj3zy-PPx5sb-Zp-_z9mHBpK_z9F2epnl7eCuXalrhzPNJ1sm2XM99dt9cz52A62VbWceN3IkbuGHWyd5kryDbcQN35vpXqjtyZ8WRrH0rDiO1xj2fPKIRFxwNTLp7x-cbu5PuXn9aetPyCagMoCpoWHi2R5Pu9mnRDCfd7a-zQKaKS7Xe8rTCHAjFqOAvqeVKzqaaRlRRwng-WYK7cB_mYBnuwYNbezEVVbjkMvR8Iul4uI7AaHXch_ONA9DjvkmicX_mL153HXWj2VzBkCtJxYxqtW4ilyLUnFFzgx8mWsU4Uw2n8IQyXuWMLJKYCrS2-L5kkRjbEEXLNDdxgREDUr6zSJiSVR6ScpMwFcWUWVK2OsFW6x8" }, { "id": "rich-mindmap-explicit-tidy-tree", "category": "Mindmap", "title": "Mindmap: Explicit Tidy Tree", "description": "A one-sided compiler dependency hierarchy using explicit tidy-tree layout instead of the central bilateral default.", "source": "---\nconfig:\n layout: tidy-tree\n---\nmindmap\n accTitle: Explicit one-sided dependency tree\n root((Compiler))\n Front end\n Lexer\n Parser\n Type checker\n Middle end\n Intermediate representation\n Optimizer\n Constant folding\n Dead code elimination\n Back end\n Instruction selection\n Register allocation\n Machine code", "options": {}, "renderUrl": "/examples/corpus/#rich-mindmap-explicit-tidy-tree", "editorUrl": "/editor/#deflate:VZHNagJBEIRfpZmTggs57zEmgUAkIXjcy9BTauNszzDTC27Edw-rLOqtq-vrH6izq2koDNe6pmk65aQ72bedEkU_psFaMgljYwXo9Ir0oqH3eUI881YsoqX3U47CYpQUTZWAQAEZGqA80m2aqKRki8U69VkiynI59Yg-SlIjaLhJoi-cUGbx40u9q-2YQXwAH-feRkKIeBz_VEPpEcQbqCAXVKh5k6Qz8p1Nevm77yVaJ63m1WiXYhDd3503-ECcAghRetGHTa-ej8-nq5WBJ4AqIq7VbP5iL9VQyMeY-OmfjeeDKK5X3MplH2E2heJWrtoYp5KL1DxpILj2ZeVuWbn27Dj12bO51sqAy-Uf" }, { "id": "rich-gitgraph-monorepo-delivery-lanes", "category": "GitGraph", "title": "GitGraph: Monorepo Delivery Lanes", "description": "Twelve delivery lanes with explicit main placement, double-digit branch orders, and a tagged coordination commit.", "source": "---\ntitle: Monorepo delivery lanes\nconfig:\n gitGraph:\n mainBranchOrder: 6\n---\ngitGraph LR:\n commit id:\"root\" msg:\"Monorepo baseline\"\n branch docs order:12\n commit id:\"docs\" msg:\"Documentation\"\n checkout main\n branch api order:1\n commit id:\"api\" msg:\"Public API\"\n checkout main\n branch web order:2\n commit id:\"web\" msg:\"Web client\"\n checkout main\n branch mobile order:3\n commit id:\"mobile\" msg:\"Mobile client\"\n checkout main\n branch data order:4\n commit id:\"data\" msg:\"Data pipeline\"\n checkout main\n branch infra order:5\n commit id:\"infra\" msg:\"Infrastructure\"\n checkout main\n branch security order:7\n commit id:\"security\" msg:\"Security review\"\n checkout main\n branch qa order:8\n commit id:\"qa\" msg:\"Quality gates\"\n checkout main\n branch release order:9\n commit id:\"release\" msg:\"Release train\"\n checkout main\n branch support order:10\n commit id:\"support\" msg:\"Support readiness\"\n checkout main\n branch analytics order:11\n commit id:\"analytics\" msg:\"Usage analytics\"\n checkout main\n commit id:\"ship\" type:HIGHLIGHT tag:\"train-ready\" msg:\"Coordinate delivery\"", "options": {}, "palettePeers": { "count": 12, "kind": "delivery lanes" }, "renderUrl": "/examples/corpus/#rich-gitgraph-monorepo-delivery-lanes", "editorUrl": "/editor/#deflate:jdRLa9wwEAfwryJ03oW06dO3PmB3IaVp2tKLL2N54h0qS4o0ymJCvnuRn1ubOLlZzN8_DSNbDzLY6BXKTG6329wwscZMfLPGenRWlKjpHn0jNBgMuVHW3FKV5UaIinjnwR3bhRA1kPnswajjd1-iz8S73LTkkBNXN21U2bomFlRmufTWci5FHaosl-OmBQTUZDCXKV-0qCitCsK29KvXcycVR-erVbFGw8BkTWeoI6q_NnLb5RkKjgZzToKjUbyOhSYlPl0f1rkTFj236PCExcj9wUIoTWh4nattQRp78XIudtWz6bXhl7glMPTqm8UkgWGaZAo6cmen8ZRJ5tYP6Ns52hZH9ZBWgX1UHP0zbEAVPXHTy-_n8lAf8Z_DCx7vCU_r-t3Q8Ye5eze1-yOCTmAFjGHd86gRwnBiHxdfe1ce5Zs-zj4x63OIzlnPw8d6sZhDV5_G0Oc9QkkGwzONgwHdME1_2PJ3GBLjFr8DVDi9-cQG_zV5JJdLwY3DbH_Y7a8Ou_0vwZC0dgbb1O50ll-s9SUZYBzvoVzKjXSgkTndWXIjAzc6PSpPwaU1Yimzi43sriqZPUhlaweKZcY-4uPjPw" }, { "id": "rich-gitgraph-merge-backports", "category": "GitGraph", "title": "GitGraph: Merge Backports", "description": "A merge commit backported to a maintenance line with explicit immediate-parent ancestry.", "source": "---\ntitle: Merge commit backports\n---\ngitGraph LR:\n accTitle: Merge and cherry pick ancestry\n accDescr: A merge is backported using an immediate parent explicitly\n commit id:\"ROOT\" tag:\"v1\"\n branch develop order:2\n branch release/1.x order:3\n commit id:\"release-base\" msg:\"Maintain version one\"\n checkout main\n commit id:\"main-work\" msg:\"Prepare version two\"\n checkout develop\n commit id:\"feature-a\" msg:\"Feature A\"\n commit id:\"feature-b\" msg:\"Feature B\"\n checkout main\n merge develop id:\"MERGE\" type:HIGHLIGHT tag:\"v2\"\n checkout release/1.x\n cherry-pick id:\"MERGE\" parent:\"feature-b\" tag:\"selected-backport\"\n commit id:\"verify-backport\" msg:\"Verify maintenance release\"", "options": {}, "renderUrl": "/examples/corpus/#rich-gitgraph-merge-backports", "editorUrl": "/editor/#deflate:dZLBbtswDIZfhdA53tb2pluHdUmBBi2CYCdfGJpxhNiSQNFpjaLvPsh2gsztbhL56-NPiu8mhU6IjTVFUZRenTZsYc1SM1BoW6ewQzrGIJpKP2hqp0vBeICnjS09ABJtr5-hr4AOLNJDdHQE9MRJpZ-0vziRWLiHdlC7dCnAFXTJ-RrQg2tbrhwqQ0Rhr8BvsXHktBk4kzVX2dJsnp-3pQHF2pbmdFOaLNgJejpAxSduQoQgFYu9vcoIN4yJv998e5uyd3PwJCl2mLg00KZcYI3OKzoPJ5bkgofgeSxJB6Zj6BRadH7OyrHiNcjxAnoRzq1dOPoaZpzJ_By1Z9ROuMAL6vcYgfsJ8IV490n88z-ux285D26ArB82y4c84j6yXT0uV0-Py9X2PPHbGehqslNcpC-GVfiHNn7szOPITNwwKVfFeTU-N3Zicfv-SjC192eID90o-7x7Z0OlMQsTsWHVvO9mYZL2TT6SuBTznbky9sfCUPB7Vxv7bii0EUmNVen44-Mv" }, { "id": "rich-gitgraph-ci-cd-promotion", "category": "GitGraph", "title": "GitGraph: CI/CD Promotion", "description": "Build, test, canary, and production promotion modeled through ordered branches, typed commits, tags, and merges.", "source": "---\ntitle: CI/CD promotion history\n---\ngitGraph LR:\n accTitle: Build, test, canary, and production promotion\n commit id:\"source\" msg:\"Source accepted\"\n branch build order:2\n commit id:\"compile\" msg:\"Compile and package\"\n commit id:\"scan\" type:REVERSE msg:\"Supply-chain scan\"\n checkout main\n merge build id:\"artifact\" tag:\"sha-7f31\"\n branch staging order:3\n commit id:\"integration\" msg:\"Integration suite\"\n commit id:\"load\" msg:\"Load test\"\n checkout main\n merge staging id:\"candidate\" type:HIGHLIGHT tag:\"rc.4\"\n branch canary order:4\n commit id:\"one-percent\" msg:\"One percent traffic\"\n commit id:\"ten-percent\" msg:\"Ten percent traffic\"\n checkout main\n merge canary id:\"production\" type:HIGHLIGHT tag:\"v4.2.0\"", "options": {}, "renderUrl": "/examples/corpus/#rich-gitgraph-ci-cd-promotion", "editorUrl": "/editor/#deflate:fZPBauMwEIZfZdDZznbbwIKOmw1JILCQhj35Mh2NbVFbEvK4EErfvUh2GpK2e7PEzKf_G8mvavBjJFZalWVZObHSsYbV7sfqD4Toey_WO2jtID6eKpeLGiubiKGF_UFXDgCJjlPf79F2pgDhQQogdBhPBaAzCWVGyqwPamol3_dWwBpdzUkqBf3Q6Eo95mWCcxA2lUr1TxEdtfCUzgEfDUd9f8sh3wfbXUCraT3lQHrGhifY1eGErlIgp8D6sP63PjyuzznGELpTSS1aB1NZbm6Znv0o0KPNKj3HhudkGYlRbI0kCYuJNLRY_qoffl6pDIKNdc0s83CbyzrhJmKe11lod9mDYbTyhU7n0XzU7z2afCf_TX4OMs0QnbEGE3qayXa32e53m-1xdom0WF55TLc9ayxv83jHZeBI7NI4plh_HcO8BxKxri19FhF2nxqP7L5p_NpsjpZ5l4f4ndnLcnG_uKuUKlTAjkXSz6EKNcipS58U7RDSmtkofVco8q62jdKv-eUhidISR357ewc" }, { "id": "rich-style-palette-flowchart", "category": "Style + Palette", "title": "Style + Palette: Flowchart", "description": "One Mermaid source rendered with a named style and palette stack; appearance stays outside the source.", "source": "flowchart TD\n subgraph product [Product Loop]\n A[Capture request] --> B{Ready?}\n B -->|yes| C[Ship]\n B -.->|needs work| D[Refine]\n end", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-flowchart", "editorUrl": "/editor/#deflate:NY69bsMwDIRfheBsdcnmIUWdjBmKtJubQZFoW6grqhSFwLD97oXTZLuf74CbMXMRR1hjN_LNDVYUPo9fESCXay82DZCEfXEK7ftDnJjTZUMA3tqDTVqEQOi3UNYLGLOHZj6T9dPr-k81W7hMlBc4tB9DeK4bMC9mv0Qin-HG8r3AsT1TFyLdCYoeK0x2JNXtYrKJBCvMOo13X65jcFYDR9OFvghtJZHHeleh49iFHusZHf8k6xRrlULr-gc" }, { "id": "rich-style-palette-architecture", "category": "Style + Palette", "title": "Style + Palette: Architecture", "description": "Architecture services, groups, and connectors use the same Style + Palette render options.", "source": "architecture-beta\n group edge(cloud)[Edge Layer]\n group core(server)[Core Services]\n service web(server)[Web App] in edge\n service api(server)[API] in core\n service db(database)[Postgres] in core\n web:R --> L:api\n api:R --> L:db", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-architecture", "editorUrl": "/editor/#deflate:Vc8xa8MwEAXgvyJussGeumkohNKhkCG0Qwc3w0l6UQWuJU5SQgj570Ue3HS89z7uuBvlWMWCNLHY71BgSxWMBoW_FqW8xJoUnEdn51hdP706D7XnK-T4B2wUdBlyhvTTSxSoD8g5WOQVtSZYqAvMpj5h1C6lowrLuv_RcQqb2x3eVtNOPBpnOseFDWf00yHm4gX5n7zA6Hc1js9qrzmFFnEKW-QMDZR4Rint_cQJQgPlcp3XuZo5WC4hLuMp-CpoJeBIPw1k43IKnvSNbPxJbAvpIhX3-y8" }, { "id": "rich-style-palette-sequence", "category": "Style + Palette", "title": "Style + Palette: Sequence", "description": "Sequence participants and messages keep their Mermaid meaning while the render call changes presentation.", "source": "sequenceDiagram\n participant U as User\n participant E as Editor\n participant R as Renderer\n U->>E: Pick style and palette\n E->>R: render(source, options)\n R-->>E: SVG", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-sequence", "editorUrl": "/editor/#deflate:ZY6xjsIwEER_ZbUVJyUVnYtURLQoKFQ0e84SrQi2Wa-LE-LfTyZUUI7evNE8MMeintFh5nvh4HknNCvdzgEgkZp4SRQMRqAMY2b9BH0F_SQWv9BQ0cBhYl29se263sFB_BWy_S0MFCZItLAZ10Lfdt3gQF_OZv3WQEwmMeSf2hjadeN42mODbxUdJkqs2OBrtubyu4inKrYXmYtyhcwTum2DPoaLzOge6OMtkTd0poWfz38" }, { "id": "rich-style-palette-class", "category": "Style + Palette", "title": "Style + Palette: Class", "description": "Class boxes and relationships share the same named look without source-level styling directives.", "source": "classDiagram\n class Renderer {\n +renderSVG(source) string\n +renderASCII(source) string\n }\n class StyleStack {\n +style string\n +palette string\n }\n Renderer --> StyleStack : uses", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-class", "editorUrl": "/editor/#deflate:bY4xC8IwEIX_SrhJsZ3cMgiiIF0NOLnE9BqCaRouySCl_10Spbbg-L537-NGCEMihcBBWRnC2UhNsr87xkpmV3QtEhIbM2NsRwWI22XzWW5ZiGScXtVHcWqaPwfTTyziy6KIUj1ndchorfPSYoxLWBTzV3V9WJo4SwEDVPDdAQcvPRJUUOQ5p4c1SkYzuLozOhHmErEFvq9ADa4zGvgIaui9VBF4pITT9AY" }, { "id": "rich-style-palette-er", "category": "Style + Palette", "title": "Style + Palette: ER", "description": "ER entities and relationships get a publication-ready treatment from render options.", "source": "erDiagram\n USER {\n string id PK\n string email\n }\n DIAGRAM {\n string id PK\n string source\n }\n EXPORT {\n string id PK\n string format\n }\n USER ||--o{ DIAGRAM : creates\n DIAGRAM ||--o{ EXPORT : renders", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-er", "editorUrl": "/editor/#deflate:hY8xC8JADIX_SsjcTm63CRUREaUqOLjEa1oO2ruSSwep_e9yKkUnl5C85OO9jBjDIJbRIEvhqBHqrh7gfFyVMKYOIKo434Cr4LD9Ubgj1yZlSqXYLNflcveXehvO2Opy2Jenv1QdpCOdqVe-xyPPwzgbG7DCpBy_03xuPi4GhH3FEjHDnlpWTZ_31LNghlHv7Wsebq2zpC74vHbNIJyWzBWaRYY2-No1aEa0oevJKhqVgafpCQ" }, { "id": "rich-style-palette-timeline", "category": "Style + Palette", "title": "Style + Palette: Timeline", "description": "Timeline periods and events reuse the same style stack as the other families.", "source": "timeline\n title Fork Roadmap\n section Discover\n 2024 Q2 : Audit forks\n : Extract small PRs\n section Ship\n 2024 Q3 : Style + Palette\n : Live editor examples", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-timeline", "editorUrl": "/editor/#deflate:RY6xTgMxDIZfxfLKIaErUzYkYGIo7cpicr5iNTlHjlMVVX13lKsqvPn_rM__Bas2i4wBXTInWfhrAXDxxPCudoSd0pSp9LRydNEFXqVGPbH1bHwan-FzhAAvbRKHWe1YO7hPgLezG0WHmikl2O5WfHftf2R13zwbCLD338TwAFtK7L7W-Xd9yImBJ3E14DPlkrjigOV2iwELFTYcsHZL39t3kkj91-Msh2bcIfOEYTNg1GWWA4YLRs2FomNwa3y9_gE" }, { "id": "rich-style-palette-journey", "category": "Style + Palette", "title": "Style + Palette: Journey", "description": "Journey task cards, sections, actors, and scores inherit the named look through render options.", "source": "journey\n title Editor adoption\n section Try\n Open preset: 5: User\n Choose palette: 4: Designer, Developer\n section Share\n Copy URL: 5: User\n Export SVG: 4: Developer", "options": { "style": [ "publication-figure", "paper" ], "seed": 3 }, "renderUrl": "/examples/corpus/#rich-style-palette-journey", "editorUrl": "/editor/#deflate:XY0xbwIxDIX_iuX5mGiXrAV1qVSplE5dQu5xpErjyHFQT4j_jo67Lmy2v-fvXbhK0wB2_CNNM8bvTGTREmjbRxMl30uxKHkCFWEa6VPvOaL3gkxFUWGOnh3tK3QmLyeRCio-wQyOnhxtUOOQoR1tcEaSMmf_pbuTVyzPUkbaf7w9OLd_RdRo9_W6-BYLd7z0sOPi50u1Md33dkgx-KlidYxDU0wQ6NmtOw6Sj3Fgd-Egv8UHY2facL3eAA" }, { "id": "rich-style-palette-xy-chart", "category": "Style + Palette", "title": "Style + Palette: XY Chart", "description": "XY chart labels, axes, grid, and series render with the same style stack while chart config still controls axes.", "source": "xychart\n title \"Styled Adoption\"\n x-axis [Mon, Tue, Wed, Thu, Fri]\n y-axis \"Renders\" 0 --> 100\n bar [25, 42, 58, 74, 88]\n line [18, 35, 52, 70, 95]", "options": { "style": [ "publication-figure", "paper" ], "seed": 3, "interactive": true }, "renderUrl": "/examples/corpus/#rich-style-palette-xy-chart", "editorUrl": "/editor/#deflate:JY6xasMwFEV_5fLmZ3CcmLgeCl26dUkCHewMivySCFTZyE_FJuTfi5rxcO6F86B5TNEKtbSs9m6i9gFQp17Q01FXLwM-hnFSN4aeslwKs7gZ3dcYGKckjG8ZGKd7YnxGd86b9bXp6SBhkDj3hBJF8Y5NWWZ_MRFdVTN2FaNuGPsdo2n-v94FQbdpGNuaUVeMfcl4q8_ENBkvqrl2MpNEYppzYuZ08c6anFlc3S1FyVJkoHbLZMdwdTdqH-SCSjRW3a9QqzFJlj-TsfrC5_MP" }, { "id": "rich-radar-model-comparison-circle", "category": "Radar", "title": "Radar: Model comparison (circle)", "description": "The default `graticule circle`: circular rings and smooth closed Catmull-Rom curves. Two model profiles compared across six shared axes — the silhouette is the message.", "source": "radar-beta\n title Model comparison\n axis speed[\"Speed\"], accuracy[\"Accuracy\"], cost[\"Cost\"]\n axis latency[\"Latency\"], context[\"Context\"], safety[\"Safety\"]\n curve a[\"Model A\"]{4, 5, 3, 4, 4, 5}\n curve b[\"Model B\"]{5, 3, 4, 3, 5, 3}\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-model-comparison-circle", "editorUrl": "/editor/#deflate:RZDBasMwDIZfRejswaDNJbdu1-3UY5yDqqjD4NrBVkZKyLsXOyEFgz_Jn36MFsxxSizYYqKB0sdNlGwAUKde4DcO4oHjY6TkcgzlhWaXIY8iQ2fxWm6LvQFinhLxs7N42bH2OWbtLH7HrBb7I8CTSqj2z0a7HFTmza9Uu5nuokW9VthjeEr_AtRZ3H55sdgvZwONgZOBcz3N-jZvh_lVzEM7bSPVfNAMDRocyYtq2QoazPr0BTm5PJZaZMD20yDHcHd_2C5YN8SKraZJ1vUF" }, { "id": "rich-radar-student-grades-keyed-values", "category": "Radar", "title": "Radar: Student grades (keyed values)", "description": "Keyed curve values (`{ english: 4, math: 5, … }`, colon optional) are reordered to axis order, so authoring order does not matter.", "source": "radar-beta\n title Student grades\n axis math[\"Math\"], science[\"Science\"], english[\"English\"], history[\"History\"]\n curve alice[\"Alice\"]{ english: 4, math: 5, history: 3, science: 4 }\n curve bob[\"Bob\"]{ math: 3, science: 5, english: 4, history: 5 }\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-student-grades-keyed-values", "editorUrl": "/editor/#deflate:TZAxa8QwDIX_itCcQqGXxdsVCl063RhnUBw1MTh2sJVyR8h_P2zTtJOeHtL3hHZMYYuGUWGkkeLLwELaA4gVx3CTbWQvMEUaOWWf7jbBQjJ3Gr9IZo19A8lY9oY7jbeqist-cjblwY-qijvbJCE-Oo2fVWnsM9hs8YeBnC2ca64a-_2XouDSlFwF7QlR8HaGK7jA8QcawtBpfA9DgdTF_8PteV8hn8C2Qha6Q4sNruRYJL8HG0zycFmaaNOae-YR1WuDJvhvO6Ha0YRlJSOoJG58HE8" }, { "id": "rich-radar-incident-response-polygon-triangle", "category": "Radar", "title": "Radar: Incident response (polygon triangle)", "description": "`graticule polygon` with three axes draws a triangular graticule and straight polygon edges.", "source": "radar-beta\n title Incident response\n axis detect[\"Detect\"], respond[\"Respond\"], recover[\"Recover\"]\n curve q3[\"Q3\"]{3, 2, 4}\n curve q4[\"Q4\"]{4, 4, 3}\n graticule polygon\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-incident-response-polygon-triangle", "editorUrl": "/editor/#deflate:TY8xbsMwDAC_QnBWgaBWF89ZMrar5UGlGEOAIqkUHSQw_PdCboZuxzuCADdsZRViHFF88PL2zepdBtCoieGSKQbOCsKtlty4J_-IDQIrk04Ozwc4nM1rKUwOv_7oZancWQ57kMO5n6FV7gw_w-Twc3A4b4OBdwN2_xdtj7ZHa8AaGI64iNdIa2KoJT2Xkru8-Qd8oMHqE6v2h9Bg02fqSBJb7TNzwPFkkEq-xgXHDancqifFUWXlff8F" }, { "id": "rich-radar-restaurant-polygon-square", "category": "Radar", "title": "Radar: Restaurant (polygon square)", "description": "Four axes under `graticule polygon` draw a square (diamond) graticule.", "source": "radar-beta\n title Restaurant comparison\n axis food[\"Food Quality\"], service[\"Service\"], price[\"Price\"], ambiance[\"Ambiance\"]\n curve a[\"Restaurant A\"]{4, 3, 2, 4}\n curve b[\"Restaurant B\"]{3, 4, 3, 3}\n graticule polygon\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-restaurant-polygon-square", "editorUrl": "/editor/#deflate:VZAxa8QwDIX_itDsg9Jcl2zXoXN7HeMMiqMLBicOsnxcCPnvh5NC20lPTx9CeiummMUx1ijUk5w6VrITgHoNDFdOSlloUnBxnEl8ilMZ08MnuMXYNxY_YuzhK1PwulhsDSSWu3fcWPw-1O7Ocnifpe4OjZ2naTcvP9JiW9a7LHcGaiz-ueBisV3PBioDrwbO2y_Y_QffC1gZONhqBwch9S4HhjmGZTi-GOkBb2hwpsCqJQQ0mHQJRTrxaS49c4_1i0EXp5sfsF5xz8Ip1iqZt-0J" }, { "id": "rich-radar-team-skills-polygon-pentagon", "category": "Radar", "title": "Radar: Team skills (polygon pentagon)", "description": "Five axes under `graticule polygon` draw a pentagonal graticule — the polygon shape always follows the axis count.", "source": "radar-beta\n title Team skills\n axis design[\"Design\"], code[\"Code\"], comms[\"Comms\"], ops[\"Ops\"], data[\"Data\"]\n curve alice[\"Alice\"]{4, 5, 3, 2, 4}\n curve bob[\"Bob\"]{3, 3, 5, 4, 3}\n graticule polygon\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-team-skills-polygon-pentagon", "editorUrl": "/editor/#deflate:RY-9asYwDEVfRWh2oTTJkq0_e5ducQbFVoOpHRtbKd9HyLsXpYVOuudwuaADW96rYxyxkqf6sLCQ3QAkSGT4YErQvkKMTSXdQgPPLazbZPHtChZnAy57niy-Zs9_nFK7RErtMrkov5df8iSkCyRkcdZpt9dvBorB6dCzXovz0RsYDHQGngz0539xyctk8SUvWuquxmCgN9BdpbWSBLdHhpLjfc2bykQ3GNBgocgi-jIabHKPGl0NrSgzexwfDbq8fYYVxwNdToWc4Ch15_P8AQ" }, { "id": "rich-radar-seasonal-wind-rose-polygon-octagon", "category": "Radar", "title": "Radar: Seasonal wind rose (polygon octagon)", "description": "Eight compass axes under `graticule polygon` draw an octagonal graticule — a natural fit for directional data.", "source": "radar-beta\n title Seasonal wind rose\n axis n[\"N\"], ne[\"NE\"], e[\"E\"], se[\"SE\"], s[\"S\"], sw[\"SW\"], w[\"W\"], nw[\"NW\"]\n curve winter[\"Winter\"]{5, 3, 2, 1, 2, 4, 5, 4}\n curve summer[\"Summer\"]{2, 4, 5, 4, 3, 2, 1, 2}\n graticule polygon\n max 5", "options": {}, "renderUrl": "/examples/corpus/#rich-radar-seasonal-wind-rose-polygon-octagon", "editorUrl": "/editor/#deflate:TdBNa8MwDAbgvyJ01mAfzSX3XnvJYYemB83RgsGxgy2vLSH_fcgddBfz2NIrgTcsqWYn2GPmifPLlyiPEUC9BoFBuKTIAa4-TpBTEavxzReI5xFPI14IohiPzcZjUzEOfzY-dDV-NhsfisaT2ca7mn_ENqpka2kY8bJ1BB8E7wRv7TwQdASH_ZkpdVlaZmiwzLPvf7hl5szqXQ0Cawr3OUV7XPgGHRKuHETV_gUJi96D0WVfVruLTNi_EroUv_2M_YYuLSs7xV5zlX3_BQ" }, { "id": "rich-radar-delivery-team-profiles", "category": "Radar", "title": "Radar: Delivery Team Profiles", "description": "Eight peer team profiles share six delivery axes, stress-testing curve, point, fill, and legend identity above the legacy six-color boundary.", "source": "radar-beta\n title Delivery team profiles\n axis speed[\"Speed\"], quality[\"Quality\"], reliability[\"Reliability\"]\n axis security[\"Security\"], docs[\"Docs\"], support[\"Support\"]\n curve product[\"Product\"]{4, 4, 3, 3, 4, 5}\n curve web[\"Web\"]{5, 4, 4, 3, 3, 4}\n curve api[\"API\"]{4, 5, 5, 4, 3, 3}\n curve data[\"Data\"]{3, 4, 5, 4, 3, 3}\n curve mobile[\"Mobile\"]{4, 4, 3, 4, 3, 4}\n curve security[\"Security\"]{2, 4, 4, 5, 3, 3}\n curve qa[\"QA\"]{3, 5, 4, 4, 3, 4}\n curve docs[\"Docs\"]{3, 4, 3, 3, 5, 5}\n max 5", "options": {}, "palettePeers": { "count": 8, "kind": "peer curves" }, "renderUrl": "/examples/corpus/#rich-radar-delivery-team-profiles", "editorUrl": "/editor/#deflate:bZLLasMwEEV_RcxahdLaG-8C2XRRyGPRhZXFWJ4UgRwpeqQJJv9eJKvYoQEh39EcX98RHsGb6CRBAw57dC8dBRQnxoIKmtiatLqQu7FAODDrzFFp8qmPV-WZt0R9K2CfngIOnJ0jahVurYDtpPKpI62wU6WzmysBh9mMZHQTsS8yv9wb6VsBayN9rn201riQsEkVExndhVLGPsrU3UxKwGGsOKs4e8-r4qy-z_wPda2AL-oSV-f2jC44tKoVsNp8FL86r4IuuB4DprQYMJHlg_wJOZhOaWoFfGbxkLPsC_r57Yxvf4nrf_7nlGO7KimWoy19H2-35J3GTyNmcsArq4GDRU0hpH8FOPhw00lKp7xNNVEPzSsHaU5H9Q3NCNIMFmWAJrhI9_sv" } ] }