Skip to content

[feature]: Support Mermaid diagrams inside Markdown (GitHub-style) #8147

@leandroluk

Description

@leandroluk

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions