monaco-mermaid-ng

English | 中文

Monaco Editor 的 MermaidJS 语言支持 - 提供语法高亮、代码补全和自定义主题。

特性

• 语法高亮 - 支持 22+ 种 Mermaid 图表类型的完整语法高亮
• 双主题 - 浅色 (mermaid) 和深色 (mermaid-dark) 主题，精心配色
• 代码补全 - 智能代码补全，提供常用图表结构的代码片段
• 语言配置 - 自动闭合括号、圆括号和花括号
• YAML Frontmatter - 支持通过 YAML frontmatter 配置 Mermaid
• 配置指令 - 支持 %%{init: {...}}%% 配置指令

安装

npm install monaco-mermaid-ng
# 或
yarn add monaco-mermaid-ng
# 或
pnpm add monaco-mermaid-ng

使用方法

基础设置

import * as monaco from 'monaco-editor';
import initMermaidLanguage from 'monaco-mermaid-ng';

// 初始化 Mermaid 语言支持
initMermaidLanguage(monaco);

// 创建使用 Mermaid 语言的编辑器
const editor = monaco.editor.create(document.getElementById('editor'), {
  value: 'flowchart TD\n    A[开始] --> B[结束]',
  language: 'mermaid',
  theme: 'mermaid', // 或 'mermaid-dark'
});

配合 @monaco-editor/react 使用

import Editor, { loader } from '@monaco-editor/react';
import * as monaco from 'monaco-editor';
import initMermaidLanguage from 'monaco-mermaid-ng';

// 在使用编辑器前初始化
loader.init().then((monaco) => {
  initMermaidLanguage(monaco);
});

function App() {
  return (
    <Editor
      height="400px"
      language="mermaid"
      theme="mermaid-dark"
      defaultValue="flowchart TD\n    A[开始] --> B[结束]"
    />
  );
}

支持的图表类型

| 分类 | 图表类型 | |------|----------| | 流程与处理 | 流程图 (Flowchart)、块图 (Block Diagram)、状态图 (State Diagram) | | 序列与交互 | 时序图 (Sequence Diagram)、用户旅程图 (Journey) | | 结构 | 类图 (Class Diagram)、ER 图 (ER Diagram)、需求图 (Requirement Diagram) | | 项目管理 | 甘特图 (Gantt Chart)、时间线 (Timeline)、看板 (Kanban) | | 数据可视化 | 饼图 (Pie Chart)、象限图 (Quadrant Chart)、XY 图表、桑基图 (Sankey)、雷达图 (Radar Chart)、树状图 (Treemap) | | 层级结构 | 思维导图 (Mindmap) | | 架构 | C4 图 (Context、Container、Component、Dynamic、Deployment)、架构图 (Architecture Diagram) | | 技术 | Git 图 (Git Graph)、数据包图 (Packet Diagram) |

主题

浅色主题 (mermaid)

基于 Monaco 的 vs 主题，针对 Mermaid 语法优化配色。

深色主题 (mermaid-dark)

基于 Monaco 的 vs-dark 主题，针对 Mermaid 语法优化配色。

// 动态切换主题
monaco.editor.setTheme('mermaid');      // 浅色主题
monaco.editor.setTheme('mermaid-dark'); // 深色主题

代码补全与代码片段

本包提供智能代码补全，包括：

• 图表类型关键字 - 所有图表类型声明 (flowchart、sequenceDiagram、classDiagram 等)
• 块级关键字 - 结构性关键字 (subgraph、loop、alt、state 等)
• 图表专用关键字 - 各图表类型特有的关键字
• 代码片段 - 常用模式的即用模板：
  • loop - 时序图循环
  • alt - 条件分支
  • opt - 可选路径
  • par - 并行操作
  • rect - 背景色区域
  • subgraph - 流程图子图
  • class - 类定义
  • state - 状态定义
  • frontmatter - YAML 配置块
  • 完整图表模板：mindmap、timeline、quadrantChart、xychart、block、packet、kanban、architecture、radar、treemap

API

initMermaidLanguage(monaco)

在给定的 Monaco 实例上初始化 Mermaid 语言支持。

参数：

• monaco - Monaco Editor 实例 (typeof Monaco)

效果：

• 注册 mermaid 语言
• 注册 Monarch 分词器用于语法高亮
• 定义 mermaid（浅色）和 mermaid-dark 主题
• 注册代码补全提供器
• 注册语言配置（注释、括号）

示例

流程图

flowchart TD
    A[开始] --> B{判断}
    B -->|是| C[确定]
    B -->|否| D[结束]

时序图

sequenceDiagram
    participant 小明
    participant 小红
    小明->>小红: 你好！
    小红-->>小明: 嗨！

使用 YAML Frontmatter

---
config:
    theme: forest
    look: handDrawn
---
flowchart LR
    A[开始] --> B[结束]

演示

查看 demo 文件夹获取带实时预览的完整示例。

许可证

MIT