Flutter图表与流程图绘制插件mermaid的使用

Mermaid是一个JavaScript库，它使用基于Markdown的语法来渲染可自定义的图表、流程图和可视化。在Flutter Web项目中，可以通过Dart的JS互操作（interop）来使用Mermaid库。

使用步骤

1. 添加依赖

首先，在pubspec.yaml文件中添加对mermaid包的依赖：

dependencies:
  mermaid: ^0.9.3

然后运行flutter pub get命令来安装依赖。

2. 加载Mermaid资源

在HTML布局中加载最新的Mermaid JavaScript和CSS资源：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div id="html"></div>

3. 调用Mermaid方法

接下来，在Dart代码中调用Mermaid的相关方法。以下是一个完整的示例demo：

import 'dart:html';

import 'package:markdown/markdown.dart' as md;
import 'package:mermaid/mermaid.dart';

const testMarkdownWithMermaid = """
[Sequence Diagram](http://mermaid-js.github.io/mermaid/#/./sequenceDiagram)
------------------
```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

“”";

final nullSanitizer_SVGCantBeInsertedWithoutIt = NullTreeSanitizer();

void main() { // 初始化Mermaid配置 MermaidApi.initialize( Config( securityLevel: SecurityLevel.Strict, theme: Theme.Forest, logLevel: LogLevel.Error, startOnLoad: false, arrowMarkerAbsolute: true, flowchart: FlowChartConfig(htmlLabels: true), sequence: SequenceDiagramConfig(), gnatt: GnattConfig(), ) );

final htmlDiv = document.getElementById(‘html’);

// 将Markdown内容转换为HTML并插入到DOM中 htmlDiv.setInnerHtml( md.markdownToHtml(testMarkdownWithMermaid, extensionSet: md.ExtensionSet.gitHubWeb, treeSanitizer: nullSanitizer_SVGCantBeInsertedWithoutIt, ) );

// 渲染Mermaid图表 mermaidRender(htmlDiv.querySelectorAll(‘code.language-mermaid’)); }

/// 这个类允许SVG节点插入到DOM中而不被过滤掉。 class NullTreeSanitizer implements NodeTreeSanitizer { @override void sanitizeTree(Node node) {} }

### 示例解释

1. **初始化Mermaid**：通过`MermaidApi.initialize()`方法设置Mermaid的配置选项。
2. **Markdown转HTML**：使用`markdownToHtml()`方法将包含Mermaid语法的Markdown文本转换为HTML，并将其插入到指定的DOM元素中。
3. **渲染Mermaid图表**：通过`mermaidRender()`方法选择包含Mermaid源代码的元素，并进行渲染。

### 其他功能

除了上述基本用法外，Mermaid还提供了其他一些高级功能，例如直接获取SVG代码的方法。不过需要注意的是，Mermaid需要浏览器环境才能生成SVG，因此无法在服务器端生成Mermaid图表。

## 更多示例

以下是一个更复杂的示例，展示了如何通过不同的方式调用Mermaid渲染方法：

```dart
// 导入必要的包
import 'dart:html';
import 'package:markdown/markdown.dart' as md;
import 'package:mermaid/mermaid.dart';

// 定义一个空的树结构净化器，以便能够插入SVG
class NullTreeSanitizer implements NodeTreeSanitizer {
  @override
  void sanitizeTree(Node node) {}
}

void main() {
  // 初始化Mermaid配置
  MermaidApi.initialize(Config(
    securityLevel: SecurityLevel.Strict,
    theme: Theme.Forest,
    logLevel: LogLevel.Error,
    startOnLoad: false,
    arrowMarkerAbsolute: true,
    flowchart: FlowChartConfig(htmlLabels: true),
    sequence: SequenceDiagramConfig(),
    gnatt: GnattConfig(),
  ));

  final htmlDiv = document.getElementById('html');
  
  // 将Markdown内容转换为HTML并插入到DOM中
  htmlDiv.setInnerHtml(
    md.markdownToHtml(mermaidExample,
        extensionSet: md.ExtensionSet.gitHubWeb,
        treeSanitizer: NullTreeSanitizer(),
    )
  );

  // 渲染Mermaid图表
  mermaidRender(htmlDiv.querySelectorAll('code.language-mermaid'));
}

// 包含多个Mermaid图表类型的示例Markdown
const String mermaidExample = """
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

“”";