flutter_mermaid library
Pure Dart Mermaid diagram renderer for Flutter
This library provides a complete implementation of Mermaid diagram rendering using only Dart and Flutter's CustomPainter, without any WebView or external API dependencies.
Supported diagram types:
- Flowchart (graph TD/LR/BT/RL)
- Sequence diagram
- Pie chart
- Gantt chart
- Timeline
- Kanban board
- Radar chart
- XY chart
- Class diagram (basic)
- State diagram (basic)
Example usage:
MermaidDiagram(
code: '''
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[OK]
B -->|No| D[Cancel]
''',
)
Pie chart example:
MermaidDiagram(
code: '''
pie
title Favorite Pets
"Dogs" : 386
"Cats" : 85
"Birds" : 15
''',
)
Timeline example:
MermaidDiagram(
code: '''
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
''',
)
Classes
- DagreLayout
- Dagre-style hierarchical graph layout algorithm
- EdgeStyle
- Style configuration for an edge
- FlowchartPainter
- Painter for flowchart diagrams
- FlowchartParser
- Parser for Mermaid flowchart diagrams
- GanttChartColors
- Default color palette for Gantt charts
- GanttChartData
- Data for a complete Gantt chart
- GanttChartLayout
- Layout engine for Gantt charts
- GanttPainter
- Painter for Gantt chart diagrams
- GanttParser
- Parser for Mermaid Gantt chart diagrams
- GanttSection
- Represents a section in a Gantt chart
- GanttTask
- Represents a single task in a Gantt chart
- InteractiveMermaidDiagram
- An interactive Mermaid diagram with pan and zoom support
- KanbanChartColors
- Default color palette for Kanban charts
- KanbanChartData
- Data for a complete Kanban chart
- KanbanChartLayout
- Layout engine for Kanban diagrams
- KanbanColumn
- Represents a column in Kanban board
- KanbanPainter
- Painter for Kanban diagrams
- KanbanParser
- Parser for Mermaid Kanban diagrams
- KanbanTask
- Represents a single task card in Kanban board
- LayoutEngine
- Abstract base class for layout engines
- MermaidColors
- Default colors for Mermaid diagrams
- MermaidDeviceConfig
- Device-specific configuration
- MermaidDiagram
- A widget that renders Mermaid diagrams using pure Dart/Flutter
- MermaidDiagramData
- Represents a parsed Mermaid diagram
- MermaidEdge
- Represents an edge/connection between nodes
- MermaidNode
- Represents a node in a Mermaid diagram
- MermaidPainter
- Base class for Mermaid diagram painters
- MermaidParser
- Main parser for Mermaid diagrams
- MermaidParseResult
- Result of parsing a Mermaid diagram
- MermaidResponsiveConfig
- Responsive configuration for Mermaid diagrams
- MermaidStyle
- Global style configuration for Mermaid diagrams
- MermaidThemes
- Predefined themes for Mermaid diagrams
- NodeStyle
- Style configuration for a node
- ParseToken
- Result of parsing a token
- PieChartColors
- Default color palette for pie charts
- PieChartData
- Data for a complete pie chart
- PieChartLayout
- Layout engine for pie charts
- PieChartPainter
- Painter for pie chart diagrams
- PieChartParser
- Parser for Mermaid pie chart diagrams
- PieSlice
- Data models for Pie Chart diagrams Represents a single slice in a pie chart
- RadarAxis
- Represents a single axis in the radar chart
- RadarChartColors
- Default color palette for Radar charts
- RadarChartData
- Data for a complete Radar chart
- RadarChartLayout
- Layout engine for Radar charts
- RadarCurve
- Represents a data curve/series in the radar chart
- RadarPainter
- Painter for Radar charts
- RadarParser
- Parser for Mermaid Radar charts
- SequenceLayout
- Layout engine for sequence diagrams
- SequenceMessage
- Represents a message in a sequence diagram
- SequencePainter
- Painter for sequence diagrams
- SequenceParser
- Parser for Mermaid sequence diagrams
- SequenceParticipant
- Represents a participant in a sequence diagram
- SimpleLayoutEngine
- Simple layout engine that arranges nodes in a grid-like pattern
- Subgraph
- Represents a subgraph container
- SubgraphStyle
- Style for subgraphs
- SugiyamaLayout
- Sugiyama-style hierarchical graph layout algorithm
- TimelineChartColors
- Default color palette for timeline charts
- TimelineChartData
- Data for a complete timeline chart
- TimelineChartLayout
- Layout engine for timeline diagrams
- TimelineEvent
- Data models for Timeline diagrams Represents a single event in a timeline
- TimelinePainter
- Painter for Timeline diagrams
- TimelineParser
- Parser for Mermaid Timeline diagrams
- TimelineSection
- Represents a section in a timeline
- XYChartColors
- Default color palette for XY charts
- XYChartData
- Data for a complete XY chart
- XYChartLayout
- Layout engine for XY charts
- XYChartPainter
- Painter for XY Charts (bar + line)
- XYChartParser
- Parser for Mermaid XY Charts
- XYChartSeries
- Represents a data series in the XY chart
Enums
- ArrowType
- Type of arrow head
- DeviceType
- Device type for responsive layout
- DiagramDirection
- Direction of the diagram flow
- DiagramType
- Type of diagram
- GanttTaskStatus
- Data models for Gantt Chart diagrams Represents the status of a task
- KanbanPriority
- Priority levels for Kanban tasks
- LineType
- Type of line
- MermaidThemeMode
- Theme modes for Mermaid diagrams
- MessageType
- Types of messages in sequence diagrams
- NodeShape
- Shape types for nodes
- ParticipantType
- Types of participants in sequence diagrams
- RadarGraticule
- Graticule type for radar charts
- TokenType
- Token types for lexical analysis
- XYChartOrientation
- Orientation of the XY chart
- XYSeriesType
- Type of data series