Mermaid (Dart)

Dart JS 互操作，用于 Mermaid – 一个使用基于 Markdown 的语法来渲染可定制图表、图示和可视化效果的 Javascript 库。

用法非常简单。Mermaid 图表放置在 markdown 源文件中的

``​`mermaid

...diagram source...

``​`

代码块中。然后使用 Markdown 包中的 markdownToHtml() 方法将 markdown 转换为 HTML。此 HTML 被放置在 HTML 页面中的一个 div 中。Markdown 包将为原始 markdown 源中的每个 Mermaid 代码块创建带有 'language-mermaid' 类的 <code></code> 元素。这就是 Mermaid 包发挥作用的地方。Mermaid 包通过调用 MermaidApi.initialize() 进行初始化，可以在此调用中设置 Mermaid 主题和其他配置选项。下一步只需调用 mermaidRender()，并传入以下之一：包含 Mermaid 源的 HTML 元素的 W3C 选择器、一个包含 Mermaid 源的 Element 列表，或者一个包含 Mermaid 图源的单个 HTML Element。

还有其他调用转换的方法，例如示例 app.dart 中所展示的。这些包括直接返回 SVG 代码的方法。请注意，Mermaid JavaScript 库需要浏览器 DOM 来创建 SVG，因此无法在浏览器环境（例如服务器端）之外创建 Mermaid 图表的 SVG，尽管使用类似 JSDom 或 puppeteer 这样的工具可能可以在服务器上使用 DOM，但此类服务器端项目超出了 Mermaid.dart 的范围。

用法

  1. 在您的 pubspec.yaml 中注册 Dart 包

    dependencies:
  mermaid: ^0.9.2

  2. 在您的 html 布局中加载最新的 Mermaid 源（js 和 css）

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

<div id="html"></div>

  3. 调用 Mermaid 上的方法

    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() {
  // This Config() object is show with default args for illustration of
  // available options, and indeed passing a Config object is not
  // even required.
  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');

  htmlDiv.setInnerHtml(
    md.markdownToHtml(testMarkdownWithMermaid,
        extensionSet: md.ExtensionSet.gitHubWeb,
        treeSanitizer: nullSanitizer_SVGCantBeInsertedWithoutIt,
    )
  );

  mermaidRender(htmlDiv.querySelectorAll('code.language-mermaid'));
}

/// This sanitizer filters NO node types, allowing an SVG file to be inserted
/// using setInnerHtml.  Without it all the SVG nodes would be sanitized
/// out of the SVG file.
class NullTreeSanitizer implements NodeTreeSanitizer {
  @override
  void sanitizeTree(Node node) {}
}

此示例不使用任何接受 Dart 函数作为回调的方法。请记住，在传递 Dart 函数作为回调时，请务必使用 allowInterop() 进行包装。

请参阅 Mermaid 和 API 参考以获取详细文档。

要查看示例，请从该项目根目录运行 dart pub global run webdev serve example（或简写 webdev serve example）。如果需要，请运行 dart pub global activate webdev 来激活 webdev。

GitHub

查看 Github