mermaid-js使用教程

### 关于 Mermaid-JS 的使用教程

#### 安装与配置
为了能够顺利使用 Mermaid-JS，在本地环境中安装是必要的。可以通过 npm 或 yarn 来完成安装：

npm install @mermaid-js/mermaid-cli -g

或者通过 yarn:

yarn global add @mermaid-js/mermaid-cli

这使得可以在命令行工具中调用 `mmdc` 命令来处理文件[^1]。

#### 创建图表
创建一个简单的流程图作为例子，以下是具体的语法结构：

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

这段代码定义了一个基本的有向图(TD)，其中节点A连接到节点B和C，而这两个又都指向了D[^3]。

#### 集成至 Markdown 文件
当希望在文档内嵌入这些动态生成的内容时，只需按照如下方式书写即可实现自动渲染效果：

graph LR;
A[方框] -->|箭头标签| B(圆圈);
A --> C{菱形};
C -.-> D[虚线];

此段落展示了如何利用不同的形状（矩形、椭圆形）、连线样式（实线、虚线）以及附加文字说明构建复杂关系网状结构[^4]。

#### 调整主题风格
Mermaid 提供了几种预设的主题选项，比如默认(default)、森林(forest)等，可以根据个人喜好更改视觉呈现形式：

mermaid.initialize({ startOnLoad: true, theme: 'forest' });

上述 JavaScript 片段实现了页面加载完成后立即应用指定外观模式的功能。