makeplane / makeplane/plane

[feature]: Render Mermaid diagrams in the rich text editor (code block live preview)

Open
#9,786 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
59.6k
Forks
5.8k
Avg merge
1d 22h
Merged PRs (30d)
49

Description

  • I have searched the existing issues
Summary

Render Mermaid diagrams in the rich text editor (work item descriptions, comments, pages): a code block with language mermaid shows a live-rendered diagram preview alongside the still-editable code — the same UX as GitHub/Notion.

Why should this be worked on?

Engineering teams keep architecture diagrams, flows and sequence charts next to the work item they describe. Today a ```mermaid block in Plane renders as plain code, so teams paste screenshots instead — un-editable, un-versioned, and quickly stale. Native rendering keeps diagrams as text: diffable, copy-pasteable, and editable in place.

Implementation notes (working PR attached):

  • Zero schema change: builds on the existing code-block node (language-mermaid class), so Markdown round-trip, HTML export and yjs collaborative editing all keep working untouched; server-side HTML sanitization already allows language-* classes.
  • mermaid (~350KB gzip) is loaded via dynamic import() only when a mermaid block is on screen — zero cost otherwise; SSR-safe.
  • Diagram follows the editor's light/dark theme; render errors show the source plus the parser message instead of breaking the editor; rapid typing is debounced.
  • Read-only surfaces (peek overview, space public pages) render the diagram automatically via the same node view.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the existing code-block node and its language-mermaid handling in the rich text editor, then trace the node view used by read-only surfaces such as peek overview and public pages. Done means Mermaid blocks show editable code beside a themed live preview, render errors preserve the source and parser message, and rapid typing does not break the editor.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.