[GH-ISSUE #7237] [FR] Mermaid diagram support #3206

New issue

Closed

opened 2026-03-23 21:28:23 +00:00 by mirror · 1 comment

mirror commented

2026-03-23 21:28:23 +00:00

Owner

Originally created by @Kureii on GitHub (Jan 18, 2025).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/7237

Description

AppFlowy should integrate Mermaid.js support, a JavaScript library that enables creating diagrams and charts using text-based syntax similar to Markdown. This feature would allow users to:

Create diagrams directly in text using Mermaid syntax
See live preview while typing
Export diagrams as SVG or PNG (optional)
Automatically adapt diagram themes based on app's dark/light mode

The supported diagram types should include:

Flowcharts
Sequence diagrams
Gantt charts
Entity-relationship diagrams
User journey diagrams
Git graphs
Class diagrams

Key functionality:

Real-time rendering
Syntax highlighting
Error detection and feedback
Integration with existing block system
Copy/paste support for diagram code

Impact

This feature would benefit the following user groups:

Developers and technical teams for documenting architecture and processes
Project managers for workflow and timeline visualization
Analysts for modeling data structures and business processes
Teachers and students for creating educational materials
Knowledge workers for better information organization and visualization

The feature would enhance AppFlowy's capabilities as a comprehensive documentation and knowledge management tool, making it more competitive with platforms like Notion and Obsidian that already support similar diagramming features.

Additional Context

Official documentation reference: https://mermaid.js.org/
Implementation should follow similar approach as GitHub, which supports Mermaid syntax in markdown files
Performance optimization for rendering large diagrams will be crucial
Export and standalone sharing capabilities for diagrams
Support for custom themes and diagram styling
Consider caching mechanism for improved performance with complex diagrams
Potential for collaboration features in future iterations

Originally created by @Kureii on GitHub (Jan 18, 2025). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/7237 ### Description AppFlowy should integrate Mermaid.js support, a JavaScript library that enables creating diagrams and charts using text-based syntax similar to Markdown. This feature would allow users to: 1. Create diagrams directly in text using Mermaid syntax 2. See live preview while typing 3. Export diagrams as SVG or PNG (optional) 4. Automatically adapt diagram themes based on app's dark/light mode The supported diagram types should include: - Flowcharts - Sequence diagrams - Gantt charts - Entity-relationship diagrams - User journey diagrams - Git graphs - Class diagrams Key functionality: - Real-time rendering - Syntax highlighting - Error detection and feedback - Integration with existing block system - Copy/paste support for diagram code ### Impact This feature would benefit the following user groups: - Developers and technical teams for documenting architecture and processes - Project managers for workflow and timeline visualization - Analysts for modeling data structures and business processes - Teachers and students for creating educational materials - Knowledge workers for better information organization and visualization The feature would enhance AppFlowy's capabilities as a comprehensive documentation and knowledge management tool, making it more competitive with platforms like Notion and Obsidian that already support similar diagramming features. ### Additional Context - Official documentation reference: [https://mermaid.js.org/](https://mermaid.js.org/) - Implementation should follow similar approach as GitHub, which supports Mermaid syntax in markdown files - Performance optimization for rendering large diagrams will be crucial - Export and standalone sharing capabilities for diagrams - Support for custom themes and diagram styling - Consider caching mechanism for improved performance with complex diagrams - Potential for collaboration features in future iterations