monaco-mermaid-ng 1.0.0

package/.prettierignore

@@ -0,0 +1,7 @@
+# Dependencies
+node_modules/
+package-lock.json
+
+# Build
+index.js
+browser.js

package/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Max Qian <astro_air@126.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# monaco-mermaid-ng
+
+[![npm version](https://img.shields.io/npm/v/monaco-mermaid-ng.svg)](https://www.npmjs.com/package/monaco-mermaid-ng)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[English](#monaco-mermaid-ng) | [中文](./README.zh-CN.md)
+
+Monaco Editor language support for [MermaidJS](https://mermaid.js.org/) - providing syntax highlighting, code completion, and custom themes.
+
+## Features
+
+- **Syntax Highlighting** - Full syntax highlighting for 22+ Mermaid diagram types
+- **Two Themes** - Light (`mermaid`) and dark (`mermaid-dark`) themes with carefully selected colors
+- **Code Completion** - Intelligent code completion with snippets for common diagram structures
+- **Language Configuration** - Auto-closing pairs for brackets, parentheses, and braces
+- **YAML Frontmatter** - Support for Mermaid configuration via YAML frontmatter
+- **Config Directives** - Support for `%%{init: {...}}%%` configuration directives
+
+## Installation
+
+```bash
+npm install monaco-mermaid-ng
+# or
+yarn add monaco-mermaid-ng
+# or
+pnpm add monaco-mermaid-ng
+```
+
+## Usage
+
+### Basic Setup
+
+```js
+import * as monaco from 'monaco-editor';
+import initMermaidLanguage from 'monaco-mermaid-ng';
+
+// Initialize Mermaid language support
+initMermaidLanguage(monaco);
+
+// Create editor with Mermaid language
+const editor = monaco.editor.create(document.getElementById('editor'), {
+  value: 'flowchart TD\n    A[Start] --> B[End]',
+  language: 'mermaid',
+  theme: 'mermaid', // or 'mermaid-dark'
+});
+```
+
+### With @monaco-editor/react
+
+```tsx
+import Editor, { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor';
+import initMermaidLanguage from 'monaco-mermaid-ng';
+
+// Initialize before using the editor
+loader.init().then((monaco) => {
+  initMermaidLanguage(monaco);
+});
+
+function App() {
+  return (
+    <Editor
+      height="400px"
+      language="mermaid"
+      theme="mermaid-dark"
+      defaultValue="flowchart TD\n    A[Start] --> B[End]"
+    />
+  );
+}
+```
+
+## Supported Diagram Types
+
+| Category | Diagram Types |
+|----------|---------------|
+| **Flow & Process** | Flowchart, Block Diagram, State Diagram |
+| **Sequence & Interaction** | Sequence Diagram, Journey |
+| **Structure** | Class Diagram, ER Diagram, Requirement Diagram |
+| **Project Management** | Gantt Chart, Timeline, Kanban |
+| **Data Visualization** | Pie Chart, Quadrant Chart, XY Chart, Sankey, Radar Chart, Treemap |
+| **Hierarchy** | Mindmap |
+| **Architecture** | C4 Diagram (Context, Container, Component, Dynamic, Deployment), Architecture Diagram |
+| **Technical** | Git Graph, Packet Diagram |
+
+## Themes
+
+### Light Theme (`mermaid`)
+
+Based on Monaco's `vs` theme with optimized colors for Mermaid syntax.
+
+### Dark Theme (`mermaid-dark`)
+
+Based on Monaco's `vs-dark` theme with optimized colors for Mermaid syntax.
+
+```js
+// Switch themes dynamically
+monaco.editor.setTheme('mermaid');      // Light theme
+monaco.editor.setTheme('mermaid-dark'); // Dark theme
+```
+
+## Code Completion & Snippets
+
+The package provides intelligent code completion including:
+
+- **Diagram Type Keywords** - All diagram type declarations (flowchart, sequenceDiagram, classDiagram, etc.)
+- **Block Keywords** - Structural keywords (subgraph, loop, alt, state, etc.)
+- **Diagram-specific Keywords** - Keywords specific to each diagram type
+- **Snippets** - Ready-to-use templates for common patterns:
+  - `loop` - Sequence diagram loop
+  - `alt` - Alternative path
+  - `opt` - Optional path
+  - `par` - Parallel actions
+  - `rect` - Background color region
+  - `subgraph` - Flowchart subgraph
+  - `class` - Class definition
+  - `state` - State definition
+  - `frontmatter` - YAML configuration block
+  - Full diagram templates for mindmap, timeline, quadrantChart, xychart, block, packet, kanban, architecture, radar, treemap
+
+## API
+
+### `initMermaidLanguage(monaco)`
+
+Initializes Mermaid language support on the given Monaco instance.
+
+**Parameters:**
+
+- `monaco` - The Monaco Editor instance (`typeof Monaco`)
+
+**Effects:**
+
+- Registers `mermaid` language
+- Registers Monarch tokenizer for syntax highlighting
+- Defines `mermaid` (light) and `mermaid-dark` themes
+- Registers completion item provider
+- Registers language configuration (comments, brackets)
+
+## Examples
+
+### Flowchart
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    B -->|No| D[End]
+```
+
+### Sequence Diagram
+
+```mermaid
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>Bob: Hello Bob!
+    Bob-->>Alice: Hi Alice!
+```
+
+### With YAML Frontmatter
+
+```mermaid
+---
+config:
+    theme: forest
+    look: handDrawn
+---
+flowchart LR
+    A[Start] --> B[End]
+```
+
+## Demo
+
+Check out the [demo](./demo) folder for a complete working example with live preview.
+
+## License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,177 @@
+# monaco-mermaid-ng
+
+[![npm version](https://img.shields.io/npm/v/monaco-mermaid-ng.svg)](https://www.npmjs.com/package/monaco-mermaid-ng)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+[English](./README.md) | [中文](#monaco-mermaid-ng)
+
+Monaco Editor 的 [MermaidJS](https://mermaid.js.org/) 语言支持 - 提供语法高亮、代码补全和自定义主题。
+
+## 特性
+
+- **语法高亮** - 支持 22+ 种 Mermaid 图表类型的完整语法高亮
+- **双主题** - 浅色 (`mermaid`) 和深色 (`mermaid-dark`) 主题，精心配色
+- **代码补全** - 智能代码补全，提供常用图表结构的代码片段
+- **语言配置** - 自动闭合括号、圆括号和花括号
+- **YAML Frontmatter** - 支持通过 YAML frontmatter 配置 Mermaid
+- **配置指令** - 支持 `%%{init: {...}}%%` 配置指令
+
+## 安装
+
+```bash
+npm install monaco-mermaid-ng
+# 或
+yarn add monaco-mermaid-ng
+# 或
+pnpm add monaco-mermaid-ng
+```
+
+## 使用方法
+
+### 基础设置
+
+```js
+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 使用
+
+```tsx
+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 语法优化配色。
+
+```js
+// 动态切换主题
+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` 主题
+- 注册代码补全提供器
+- 注册语言配置（注释、括号）
+
+## 示例
+
+### 流程图
+
+```mermaid
+flowchart TD
+    A[开始] --> B{判断}
+    B -->|是| C[确定]
+    B -->|否| D[结束]
+```
+
+### 时序图
+
+```mermaid
+sequenceDiagram
+    participant 小明
+    participant 小红
+    小明->>小红: 你好！
+    小红-->>小明: 嗨！
+```
+
+### 使用 YAML Frontmatter
+
+```mermaid
+---
+config:
+    theme: forest
+    look: handDrawn
+---
+flowchart LR
+    A[开始] --> B[结束]
+```
+
+## 演示
+
+查看 [demo](./demo) 文件夹获取带实时预览的完整示例。
+
+## 许可证
+
+MIT