[feature]: Support Mermaid diagrams inside Markdown (GitHub-style)
Open
@vihar is already working on this.
Since Nov 20, 2025.
✍️editor
✨feature
- Dominant language
- TypeScript
- Stars
- 59.6k
- Forks
- 5.8k
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 49
Description
Is there an existing issue for this?
- I have searched the existing issues
Summary
It would be extremely helpful if Plane supported Mermaid diagrams directly inside Markdown content, similar to how GitHub and other tools do.
Example syntax:
```mermaid
graph TD
A[Feature] --> B[Spec]
B --> C[Implementation]
C --> D[Release]
```
Why should this be worked on?
Today, if we paste Mermaid code blocks in Plane, they are rendered as plain text instead of diagrams. Native rendering would make specs, architecture documents, and flows much easier to understand and maintain.
Why this matters
- Improves documentation quality without leaving Plane
- Makes it easier to share system architecture, flows, and dependencies
- Reduces the need for external tools (Miro, draw.io, etc.) just to keep diagrams updated
- Fits naturally into Markdown-heavy workflows that many dev teams already use
Suggested behavior
- Detect ```mermaid code blocks in Markdown
- Render them as SVG/canvas diagrams
- Fallback gracefully to plain text if rendering fails (invalid Mermaid, etc.)
- Optional: toggle to show “code vs rendered diagram”
Bonus (nice to have)
- Support Mermaid in comments as well as description fields
- Dark/light theme aware diagrams
- Basic error message when Mermaid syntax is invalid
Thanks — this would be a huge quality-of-life improvement for anyone using Plane to write technical specs.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.