Every registered type

Catalogue

","\t\t\t\t

","\t\t\t>","\t\t\t\tid=\"catalogue\"","\t\t\t\tclassName=\"diagram-gallery-section\"","\t\t\t\taria-labelledby=\"diagram-catalogue-heading\"","\t\t\t","\t\t\t\t\t","\t\t\t\t\t","\t\t\t\t\t","\t\t\t\t

","\t\t\t\t\t

Graph, sequence, and chart examples at the same width as authored prose.

","\t\t\t\t\t\t

Three families, one measure

","\t\t\t\t\t\t

Normal document width

","\t\t\t\tid=\"featured\"","\t\t\t\taria-labelledby=\"diagram-featured-heading\"","\t\t\t","\t\t\t\tBrowse {DIAGRAM_FIXTURES.length} types","\t\t\t\t\t

","\t\t\t\t\t\tdocument.","\t\t\t\t\t\tBrowse the retained catalogue, inspect one example at a time, and try two views in a","\t\t\t\t\t

","\t\t\t\t\t

Diagrams in a document

","\t\t\t\t\t

Development gallery · SeeCode rendering module

","\t\t\t\t

","\t\t\t

","\t\t

","\treturn (","\t\tfamily => !familyOrder.includes(family),","\tlet unknownFamilies = [...new Set(DIAGRAM_FIXTURES.map(item => item.family))].filter(","\t\tDIAGRAM_FIXTURES.some(item => item.family === family)","\tlet families = familyOrder.filter(family =>","\tlet result = renderDiagram(selected.spec);","\tlet selected = fixture(selectedType);","\tlet [selectedType, setSelectedType] = useState(\"flowchart\");","export function DiagramGalleryPage() {","\t\t","\t\t\t

","\t\t\t\t\t\t:

Second diagram unmounted.

}","\t\t\t\t\t\t)","\t\t\t\t\t\t\t","\t\t\t\t\t\t\t\t

{label(second.type)} · second instance

","\t\t\t\t\t\t\t\t","\t\t\t\t\t\t\t

","\t\t\t\t\t\t? (","\t\t\t\t\t{secondMounted","\t\t\t\t\t\t\tits own step.","\t\t\t\t\t\t\tThe second view is independent. Exploring a step in one diagram leaves the other at","\t\t\t\t\t\t>","\t\t\t\t\t\t\ttabIndex={0}","\t\t\t\t\t\t\tsuppressContentEditableWarning","\t\t\t\t\t\t\trole=\"textbox\"","\t\t\t\t\t\t\tcontentEditable","\t\t\t\t\t\t\taria-multiline=\"true\"","\t\t\t\t\t\t\taria-label=\"Editable prose keyboard probe\"","\t\t\t\t\t\tEditable prose keyboard probe · local only","\t\t\t\t\t

","\t\t\t\t\t

","\t\t\t\t\t\t

{label(first.type)} · first instance

","\t\t\t\t\t\t","\t\t\t\t\t

","\t\t\t\t

","\t\t\t\t/>","\t\t\t\t\tsource={\"# A shared rendering language\\n\\nA diagram can sit alongside prose while the document keeps its familiar reading width. The two views below have independent controls, focus, and SVG resources.\"}","\t\t\t\t","\t\t\t\t","\t\t\t\t\t{secondMounted ? \"Unmount second diagram\" : \"Mount second diagram\"}","\t\t\t\t>","\t\t\t\t\ttype=\"button\"","\t\t\t\t\tonClick={() => setSecondMounted(value => !value)}","\t\t\t\t\tclassName=\"btn btn-md btn-secondary\"","\t\t\t\t setAlternate(value => !value)}","\t\t\t

","\t\t\t\t

","\t\t\t\t\tDevelopment specimen using the document surface. Diagrams are not persisted MDX nodes.","\t\t\t\t

","\t\t\t\t\t

In the reading flow

","\t\t\t\t\t

Document specimen

","\t\t\t

","\t\t>","\t\t\tid=\"document\"","\t\t\tclassName=\"diagram-gallery-section\"","\t\t\taria-labelledby=\"diagram-document-heading\"","\t\t","\t\t\t","\t\t\t\t{item.type}","\t\t\t\t

{label(item.type)}

","\t\t\t

","\t\t

","\tlet item = fixture(type);","function FeaturedDiagram({ type }: { type: string }) {","\t).join(\" \");","\t\tacronym[word] ?? (index === 0 ? word.replace(/^./, first => first.toUpperCase()) : word)","\treturn type.split(\"-\").map((word, index) =>","\tlet acronym: Record = { db: \"DB\", dp: \"DP\", er: \"ER\", it: \"IT\", uml: \"UML\" };","function label(type: string): string {","\treturn first;","\tif (!first) throw new Error(\"Diagram gallery requires catalogue fixtures.\");","\tlet first = DIAGRAM_FIXTURES[0];","\tif (match) return match;","\tlet match = DIAGRAM_FIXTURES.find(item => item.type === type);","function fixture(type: string): Fixture {","let familyOrder = [\"process\", \"systems\", \"structure\", \"charts\", \"data-platform\"];","};","\tsystems: \"Systems\",","\tstructure: \"Structure\",","\tprocess: \"Process\",","\t\"data-platform\": \"Data platform\",","\tcharts: \"Charts\",","let familyLabels: Record = {","type Fixture = (typeof DIAGRAM_FIXTURES)[number];","import \"./styles.css\";","import \"@chopin/editor/styles.css\";","import \"@chopin/diagrams/styles.css\";","import { StaticPlanEditor } from \"@chopin/editor/static\";","import { Diagram } from \"@chopin/diagrams/react\";","import { DIAGRAM_FIXTURES } from \"@chopin/diagrams/fixtures\";","import { renderDiagram } from \"@chopin/diagrams\";","import { useState } from \"react\";","6d4e16d2","apps/web/package.json",{"_128":1381,"_130":131},{"_128":1380,"_130":131},[1364],{"_47":1365,"_48":411,"_49":1365,"_51":468,"_52":1366},11,[1367,1368,1369,1370,1371,1372,1373],{"_91":423,"_92":94},{"_91":423,"_92":1379},{"_91":423,"_92":1378},{"_91":40,"_92":1377},{"_91":423,"_92":1376},{"_91":423,"_92":1375},{"_91":423,"_92":1374},"\t\t\"@chopin/icons\": \"workspace:*\",","\t\t\"@chopin/editor\": \"workspace:*\",","\t\t\"@chopin/draft\": \"workspace:*\",","\t\t\"@chopin/diagrams\": \"workspace:*\",","\t\t\"@chopin/dialect\": \"workspace:*\",","\t\"dependencies\": {","e44f7071","45012000","parents",[20],"author",{"_1395":1396,"_1397":1398,"_1403":1405},"committer",{"_1395":1396,"_1397":1398,"_1403":1404},"message","feat: add diagram gallery and document specimen","signature","subject","authors",[1394],{"_1395":1396,"_1397":1398,"_1399":1400,"_1401":1402},"name","Maggie Appleton","email","5599295+MaggieAppleton@users.noreply.github.com","login","MaggieAppleton","avatarUrl","https://avatars.githubusercontent.com/u/5599295?v=4","time",1791462348,1791458209,"documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","site","nexthub","private","admin","settings","maintainer","triage","starred","stars","watchers","watching","pinned","notify","views",[1550,1551,1552,1553,1554,1555,1556,1557,1558,1559,1560,1561,1562],"navigation",{"_1426":1427,"_1510":1511,"_1512":1513,"_1514":1515,"_1516":1517,"_1518":1519,"_91":1520},"sources",[],"viewer","meta",{"_1503":1504,"_1505":1506,"_1507":125,"_1415":26,"_1508":1498,"_1509":26,"_1421":43,"_1422":43},"branches",[1445,1446,1447,1448,1449,1450,1451,1452,1453,1454,1455,1456,1457,1458,1459,1460,1461,1462,1463,1464,1465,1466,1467,1468,1469,1470,1471,1472,1473,1474,1475,1476,1477,1478,1479,1480,1481,1482,1483,1484,1485,1486,1487,1488,1489,1490,1491,1492,1493,1494,1495,1496,1497,1498,1499,1500,1501,1502],"tags",[1441,1442,1443,1444],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","head","empty","pins",[1533,1534,1535],"documents",{"_1529":1530,"_1531":1365},"code",{"_1525":1526,"_1527":1528},"automations",{"_1523":488,"_1524":-5},"delivery",{"_1521":43,"_1522":-5},"04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows","deployments","commits",1000,"changes",13,"counts",{"_1532":1365},"total","issue",{"_1536":1527,"_1395":1548,"_35":1527,"_1539":1549,"_1424":1541,"_1542":26,"_1543":1541,"_1544":1528},{"_1536":1545,"_1395":1546,"_35":1545,"_1539":1547,"_1424":1541,"_1542":26,"_1543":1541,"_1544":43},{"_1536":1537,"_1395":1538,"_35":1537,"_1539":1540,"_1424":1541,"_1542":26,"_1543":1541,"_1544":1365},"id","issues","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_1536":1527,"_1395":1548,"_35":1527,"_1539":1593,"_1424":1541,"_1542":26,"_1543":1541},{"_1536":1545,"_1395":1546,"_35":1545,"_1539":1592,"_1424":1541,"_1542":26,"_1543":1541},{"_1536":1537,"_1395":1538,"_35":1537,"_1539":1591,"_1424":1541,"_1542":26,"_1543":1541},{"_1536":1588,"_1395":1589,"_35":1588,"_1539":1590,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1585,"_1395":1586,"_35":1585,"_1539":1587,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1523,"_1395":1583,"_35":1516,"_1539":1584,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1524,"_1395":1580,"_35":1581,"_1539":1582,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1521,"_1395":1578,"_35":1521,"_1539":1579,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1574,"_1395":1575,"_35":1576,"_1539":1577,"_1424":26,"_1542":26,"_1543":1541},{"_1536":1512,"_1395":1572,"_35":1512,"_1539":1573,"_1424":26,"_1542":26,"_1543":26},{"_1536":1569,"_1395":1570,"_35":1569,"_1539":1571,"_1424":26,"_1542":26,"_1543":26},{"_1536":1566,"_1395":1567,"_35":1566,"_1539":1568,"_1424":26,"_1542":26,"_1543":26},{"_1536":1563,"_1395":1564,"_35":1563,"_1539":1565,"_1424":26,"_1542":26,"_1543":26},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794435004348,"sidebar","expanded"]

{label(selected.type)}

{familyLabels[family] ?? label(family)}

Three families, one measure

Diagrams in a document

In the reading flow

{label(item.type)}