Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Design] Style Mermaid diagrams

Aperta
  • Qualcosa non va?
#165 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
design, frontend

Direzione di ricerca

Start at /design-audit#authored-content and the Mermaid rendering and preview surfaces in packages/editor. Compare native Mermaid theming, beautiful-mermaid, and another maintained approach, then run the listed type, CI, editor test, and E2E commands. Done means an approved audit covering representative and invalid states, with security, accessibility, bundle, performance, and limitation evidence.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Base branch: main
Branch: maggie/style-mermaid-diagrams
Depends on: None

Goal

Research and implement a distinctive, readable Mermaid visual system for Chopin diagrams instead of the current generic neutral rendering.

Context From Planning

  • Mermaid diagrams in /design-audit#authored-content look poor and need a dedicated design pass.
  • Investigate existing styled Mermaid approaches rather than inventing every diagram treatment from scratch.
  • Candidate: beautiful-mermaid offers token-like two-color theming and React integration: https://github.com/lukilabs/beautiful-mermaid. Mermaid itself supports base theme variables and themeCSS. Treat these as candidates, not selected dependencies.

Current Behavior

Chopin lazily renders Mermaid with strict security, HTML labels disabled, suppressed Mermaid error SVGs, and the built-in neutral theme. The editor owns source and preview; wide diagrams use authored drawing size inside an overflowable preview so labels remain readable.

Desired Behavior

Define a Chopin diagram theme and presentation shell with clean typography, hierarchy, spacing, connectors, nodes, groups, state colors, overflow, source controls, and parse-error treatment across common software-planning diagrams.

Acceptance Criteria

  • A research note compares native Mermaid base theme variables/themeCSS, beautiful-mermaid, and at least one other maintained styling approach for quality, diagram coverage, security, bundle cost, and React/editor fit.
  • The design audit includes representative flowchart, sequence, state, class/entity, and dense/wide diagrams plus invalid and empty source states.
  • Diagram colors, type, radii, strokes, and spacing derive from Chopin design tokens where Mermaid permits.
  • Labels remain readable, diagrams can be keyboard-scrolled, and narrow layouts preserve the current overflow behavior.
  • Strict security, disabled HTML labels/click handlers, lazy loading, parse-error containment, and source ownership remain intact.
  • The chosen approach avoids a second editor or writing generated SVG into Lexical's canonical source.
  • Maggie approves the audit specimens before production migration.

Verification Commands

  • bun run types
  • bun run ci
  • bun test packages/editor
  • bun run e2e

Primary Surfaces

  • /design-audit#authored-content
  • Mermaid rendering and preview in packages/editor
  • Shared Chopin color, typography, radius, and spacing tokens

Expected PR Checks

  • Repo required checks

Report Requirements

  • Library/theme comparison and dependency decision
  • Before/after screenshots for every representative diagram
  • Security, accessibility, bundle, and performance evidence
  • Unsupported diagram-specific styling limitations

Implementation Notes

  • Prefer native theming when it can reach the desired quality; add a dependency only when it materially improves output and remains maintainable.
  • Keep arithmetic/layout owned by Mermaid or application code, not model-generated pixel coordinates.
  • Preserve generated SVG sanitization/security boundaries and the derived-preview ownership model.

Stop Conditions

  • A candidate requires enabling HTML labels, scripts, click handlers, or unsafe rendering.
  • The visual direction cannot cover common diagram types consistently without a design decision.
Lingua principale
TypeScript
Stelle
351
Fork
20
Merge medio
14h 38m
PR unite (30g)
32

Preparare l'ambiente

Non abbiamo ancora controllato i file di configurazione di questo progetto. Parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di githubnext/chopin

Tutte le issue di githubnext/chopin

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.