Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Design] Style Mermaid diagrams

Abierto
  • ¿Algo no está bien?
#165 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
typescript
Área
design, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement triage/human-response

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.
Lenguaje dominante
TypeScript
Estrellas
392
Forks
22
Merge medio
1 d 7 min
PR fusionados (30 d)
203

Preparar el entorno

  • Incluye un Dockerfile o un archivo de Docker Compose
  • Sin plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de githubnext/chopin

Todos los issues de githubnext/chopin

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.