flutter_mermaid 0.1.0

A pure Dart/Flutter library for rendering Mermaid diagrams without WebView or external dependencies. Supports flowcharts, sequence diagrams, pie charts, Gantt charts, timelines, Kanban boards, radar c [...]

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_mermaid/flutter_mermaid.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Mermaid Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  final List<DiagramExample> _examples = [
    DiagramExample(
      title: 'Flowchart',
      code: '''
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
''',
    ),
    DiagramExample(
      title: 'Sequence Diagram',
      code: '''
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
    Alice->>Bob: How are you?
    Bob-->>Alice: I'm good, thanks!
''',
    ),
    DiagramExample(
      title: 'Pie Chart',
      code: '''
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" : 5
''',
    ),
    DiagramExample(
      title: 'Gantt Chart',
      code: '''
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
    A task :a1, 2024-01-01, 30d
    Another task :after a1, 20d
    section Another
    Task in Another :2024-01-12, 12d
    another task :24d
''',
    ),
    DiagramExample(
      title: 'Timeline',
      code: '''
timeline
    title History of Social Media Platform
    section 2002
        LinkedIn
    section 2004
        Facebook
        Google
    section 2005
        Youtube
    section 2006
        Twitter
''',
    ),
    DiagramExample(
      title: 'Kanban',
      code: '''
kanban
    Backlog
        Task 1 @high
        Task 2 @normal
    In Progress
        Task 3 @high
    Review
        Task 4
    Done
        Task 5
''',
    ),
    DiagramExample(
      title: 'Radar Chart',
      code: '''
radar-beta
    title Skill Assessment
    axis Coding, Design, Testing, DevOps, Communication
    curve Developer{80, 70, 85, 60, 75}
    curve Designer{60, 90, 70, 40, 85}
''',
    ),
    DiagramExample(
      title: 'XY Chart',
      code: '''
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun]
    y-axis "Revenue" 0 --> 100
    bar [10, 25, 35, 60, 55, 80]
''',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_examples[_selectedIndex].title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      drawer: Drawer(
        child: ListView.builder(
          itemCount: _examples.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_examples[index].title),
              selected: index == _selectedIndex,
              onTap: () {
                setState(() {
                  _selectedIndex = index;
                });
                Navigator.pop(context);
              },
            );
          },
        ),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MermaidDiagram(
            code: _examples[_selectedIndex].code,
            style: MermaidStyle(),
          ),
        ),
      ),
    );
  }
}

class DiagramExample {
  const DiagramExample({
    required this.title,
    required this.code,
  });

  final String title;
  final String code;
}