feat: add plantuml plugin

.eslintrc.yml

@@ -21,7 +21,7 @@ parserOptions:
 ignorePatterns:
   - "**/node_modules/**"
   - "coverage/**"
-  - "packages/*/lib/**"
+  - "packages/**/lib/**"
   - "!**/.vuepress/**"
   - "**/.vuepress/.cache/**"
   - "**/.vuepress/.temp/**"

.vscode/settings.json

@@ -12,6 +12,7 @@
     "markdownit",
     "mdit",
     "mhchem",
+    "plantuml",
     "softbreak",
     "tasklist",
     "treeshake",

docs/package.json

@@ -12,6 +12,7 @@
     "@mdit/plugin-alert": "workspace:*",
     "@mdit/plugin-container": "workspace:*",
     "@mdit/plugin-demo": "workspace:*",
+    "@mdit/plugin-plantuml": "workspace:*",
     "@mdit/plugin-snippet": "workspace:*",
     "@vuepress/bundler-vite": "2.0.0-rc.9",
     "mathjax-full": "3.2.2",

docs/src/.vuepress/config.ts

@@ -1,6 +1,7 @@
 import { alert } from "@mdit/plugin-alert";
 import { container } from "@mdit/plugin-container";
 // import { demo } from "@mdit/plugin-demo";
+import { plantuml } from "@mdit/plugin-plantuml";
 import { snippet } from "@mdit/plugin-snippet";
 import { cut } from "nodejs-jieba";
 import { type UserConfig, defineUserConfig } from "vuepress";
@@ -69,6 +70,7 @@ export default <UserConfig>defineUserConfig({
         return path.join(cwd, filePath);
       },
     });
+    md.use(plantuml);
   },
 
   theme,

docs/src/README.md

@@ -24,7 +24,7 @@ features:
     details: Creating block-level custom containers
     link: /container.html
 
-  - title: Demo
+  - title: demo
     icon: creative
     details: Display snippets and render result both
     link: /demo.html
@@ -64,26 +64,31 @@ features:
     details: Render math expressions with KaTeX
     link: /katex.html
 
-  - title: mathjax
-    icon: tex
-    details: Render math expressions with Mathjax
-    link: /mathjax.html
-
   - title: mark
     icon: write
     details: Mark and highlight contents
     link: /mark.html
 
-  - title: stylize
-    icon: style
-    details: Stylizing tokens
-    link: /stylize.html
+  - title: mathjax
+    icon: tex
+    details: Render math expressions with Mathjax
+    link: /mathjax.html
+
+  - title: plantuml
+    icon: diagram
+    details: Add plantuml diagram support
+    link: ./plantuml.html
 
   - title: snippet
     icon: context
     details: Import code snippets in markdown
     link: /snippet.html
 
+  - title: stylize
+    icon: style
+    details: Stylizing tokens
+    link: /stylize.html
+
   - title: sub
     icon: subscript
     details: Support subscript

docs/src/plantuml.md

@@ -0,0 +1,130 @@
+---
+title: "@mdit/plugin-plantuml"
+icon: context
+---
+
+Plugin to support plant uml base on [@mdit/plugin-uml](uml.md).
+
+<!-- more -->
+
+## Usage
+
+::: code-tabs#language
+
+@tab TS
+
+```ts
+import MarkdownIt from "markdown-it";
+import { plantuml } from "@mdit/plugin-plantuml";
+
+const mdIt = MarkdownIt().use(plantuml);
+
+mdIt.render(`\
+@startuml
+Bob -> Alice : hello
+@enduml
+`);
+```
+
+@tab JS
+
+```js
+const MarkdownIt = require("markdown-it");
+const { plantuml } = require("@mdit/plugin-plantuml");
+
+const mdIt = MarkdownIt().use(plantuml);
+
+mdIt.render(`\
+@startuml
+Bob -> Alice : hello
+@enduml
+`);
+```
+
+:::
+
+## Demo
+
+::: md-demo demo
+
+@startuml
+Bob -> Alice : hello
+@enduml
+
+:::
+
+## Options
+
+```ts
+interface MarkdownItPlantumlOptions {
+  /**
+   * Plantuml parse type
+   *
+   * @default "uml"
+   */
+  type?: "uml" | "fence";
+
+  /**
+   * diagram type
+   *
+   * @description Only available when using default srcGetter
+   *
+   * @default "uml"
+   */
+  name?: string;
+
+  /**
+   * Fence info
+   *
+   * @default name
+   */
+  fence?: string;
+
+  /**
+   * Opening marker
+   *
+   * @description only available with type "uml"
+   *
+   * @default "start" + name
+   */
+  open?: string;
+
+  /**
+   * Closing marker
+   *
+   * @description only available with type "uml"
+   */
+  close?: string;
+
+  /**
+   * Plantuml server
+   *
+   * @description Only available when using default srcGetter
+   *
+   * @default "https://www.plantuml.com/plantuml"
+   */
+  server?: string;
+
+  /**
+   * Image format
+   *
+   * @description Only available when using default srcGetter
+   *
+   * @default "svg"
+   */
+  format?: string;
+
+  /**
+   * Image src getter
+   *
+   * @param content diagram content
+   * @returns image link
+   */
+  srcGetter?: (content: string) => string;
+
+  /**
+   * Diagram renderer
+   */
+  render?: RenderRule;
+}
+```

docs/src/zh/README.md

@@ -24,7 +24,7 @@ features:
     details: 创建块级自定义容器
     link: ./container.html
 
-  - title: Demo
+  - title: demo
     icon: creative
     details: 同时展示片段和渲染结果
     link: ./demo.html
@@ -64,26 +64,31 @@ features:
     details: 使用 KaTeX 呈现数学表达式
     link: ./katex.html
 
-  - title: mathjax
-    icon: tex
-    details: 使用 MathJax 呈现数学表达式
-    link: ./mathjax.html
-
   - title: mark
     icon: write
     details: 标记和突出显示内容
     link: ./mark.html
 
-  - title: stylize
-    icon: style
-    details: 样式化文字
-    link: ./stylize.html
+  - title: mathjax
+    icon: tex
+    details: 使用 MathJax 呈现数学表达式
+    link: ./mathjax.html
+
+  - title: plantuml
+    icon: diagram
+    details: 添加 Plantuml 图表支持
+    link: ./plantuml.html
 
   - title: snippet
     icon: context
     details: 在 Markdown 中导入代码片段
     link: ./snippet.html
 
+  - title: stylize
+    icon: style
+    details: 样式化文字
+    link: ./stylize.html
+
   - title: sub
     icon: subscript
     details: 支持上角标