githubnext/chopinPublic

Let's compose rich plans together

Give Mermaid diagrams a Chopin theme on stock Mermaid layout #225

MergedMaggieAppletonmerged 2 commits intomainfromrefs/pull/225/head
  1. MA

    Restyles Mermaid diagrams in the editor while keeping stock Mermaid's parser and layout.

    ## Why stock layout We compared stock Mermaid with beautiful-mermaid. beautiful-mermaid looks nicer, but it reimplements the parser and uses ELK for layout. That makes flowcharts with loops harder to read, garbles class members (`+id: string` → "string: id:"), draws ER diagrams tiny, and throws on Gantt, pie and others. Keeping stock Mermaid means a diagram lays out the same here as on GitHub or in other Markdown editors. Only the drawing changes.

    ## What changes - **Nodes, actors and class boxes:** light inset fill, hairline border, small radius, medium-weight labels. Class names are semibold and class boxes have rounded corners. - **Edge labels** ("yes", "no", "revise", "has") sit in a small bordered box. - **Arrows:** petrol arrowheads that stop a few pixels short of their target (flowchart and state). - **Sequence:** grey actor boxes with semibold names, no repeated actor row at the bottom, and longer dashed lifelines that run past the last message. - **State:** larger black start and end states. - **Gantt:** light sections and petrol-washed tasks instead of dark grey bars.

    ## How - `packages/editor/src/widgets/mermaid-theme.ts` holds the config and `themeCSS`. Every colour and radius is a theme token (`var(--color-…)`, `var(--radius-…)`); Mermaid inlines the SVG, so these resolve. `neutral` stays underneath as the fallback. The font comes from `--font-sans` at render time. No hex values and no new design-contract exceptions. - CSS can't reach a few things, and they need measured geometry: arrow gaps, rounded class boxes and the sequence tail. `renderMermaid` does these on a hidden staged copy and returns a string, so the preview slot keeps a single owner. The theme module loads lazily alongside Mermaid, so the initial bundle is unchanged. - **Maintenance risk:** the post-render step relies on Mermaid's internal class names and marker ids (`flowchart-v2-pointEnd`, `stateDiagram-barbEnd`, `classId-`). Check diagrams visually when upgrading Mermaid.

    ## Verification - Every diagram type (flowchart, sequence, state, class, ER, Gantt) checked in the real editor through `/design-audit`, using temporary fixture content that isn't committed. - `bun run ci` (tokens, design contract, design record, Impeccable), `bun run types`, and `bun test packages/editor` (305 pass) all pass. - `bun run design:browser` (Linux Docker): 38/38 pass. Diagrams aren't screenshot specimens, so no baselines changed. - **Not run locally:** `code.e2e.ts` / `responsive-content.e2e.ts`, because the e2e database ports clashed with other local containers. CI's e2e job covers them.

    🤖 Generated with [Claude Code](https://claude.com/claude-code)

  2. MaggieAppletonmerged f0aa35eb7f14last month on GitHub

  3. MaggieAppletonclosedlast month on GitHub

  4. MaggieAppletonhead-ref-deletedlast month on GitHub

  5. lavaman131referenced this in Draw Mermaid labels as HTML so arrows and entities read as written #313last month on GitHub