Add docs for PlantUML

Mudd-d · Jul 24, 2022 · b171503 · b171503
1 parent bb46b43
commit b171503
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/docs/cn/editor/diagrams.md b/docs/cn/editor/diagrams.md
@@ -74,4 +74,24 @@ erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
-也即使用标识符 `mermaid` 嵌入其代码。
+也即使用标识符 `mermaid` 嵌入其代码。
+
+## PlantUML
+
+此功能使用 [PlantUML](https://plantuml.com) 实现，您可以使用以下方式在 Markdown 内容中嵌入：
+
+<pre style="padding-top: 12px; padding-bottom: 2px">
+```plantuml
+Alice -> Bob: Authentication Request
+Bob --> Alice: Authentication Response
+
+Alice -> Bob: Another authentication Request
+Alice <-- Bob: Another authentication Response
+```
+</pre>
+
+<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuNBCoKnELT2rKt3AJx9IS2mjoKZDAybCJYp9pCzJ24ejB4qjBk42oYde0jM05MDHLLoGdrUSoeLkM5u-K5sHGY9MGw6ARNHryQb66EwGcfS2T300">
+
+也即使用标识符 `plantuml` 嵌入其代码。
+
+> 或者，您也可以使用 @startuml 和 @enduml 来嵌入上述代码。
diff --git a/docs/cn/quick-start/editor.md b/docs/cn/quick-start/editor.md
@@ -69,5 +69,6 @@ Taio 会自动提取文档中的各级标题，生成大纲视图，轻点标题
 - [Sequence Diagrams](https://bramp.github.io/js-sequence-diagrams/)
 - [Flowchart](https://flowchart.js.org/)
 - [Mermaid](https://mermaid-js.github.io/mermaid/#/)
+- [PlantUML](https://plantuml.com/)
 
 这些扩展可以让您在 Markdown 中高亮代码、显示数学公式和流程图等，查看[数学公式](cn/editor/math.md)和[绘制图表](cn/editor/diagrams.md)了解如何使用。请参考各自的文档获取更多信息。
diff --git a/docs/editor/diagrams.md b/docs/editor/diagrams.md
@@ -74,4 +74,24 @@ erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
-That is, embedding the code using identifier `mermaid`.
+That is, embedding the code using identifier `mermaid`.
+
+## PlantUML
+
+This feature is implemented using [PlantUML](https://plantuml.com/), you can use it as following:
+
+<pre style="padding-top: 12px; padding-bottom: 2px">
+```plantuml
+Alice -> Bob: Authentication Request
+Bob --> Alice: Authentication Response
+
+Alice -> Bob: Another authentication Request
+Alice <-- Bob: Another authentication Response
+```
+</pre>
+
+<img src="http://www.plantuml.com/plantuml/svg/SoWkIImgAStDuNBCoKnELT2rKt3AJx9IS2mjoKZDAybCJYp9pCzJ24ejB4qjBk42oYde0jM05MDHLLoGdrUSoeLkM5u-K5sHGY9MGw6ARNHryQb66EwGcfS2T300">
+
+That is, embedding the code using identifier `plantuml`.
+
+> Alternatively, you can also use @startuml and @enduml to wrap the code blocks.
diff --git a/docs/quick-start/editor.md b/docs/quick-start/editor.md
@@ -69,5 +69,6 @@ Before that, we have also built in some common syntax extensions for Taio:
 - [Sequence Diagrams](https://bramp.github.io/js-sequence-diagrams/)
 - [Flowchart](https://flowchart.js.org/)
 - [Mermaid](https://mermaid-js.github.io/mermaid/#/)
+- [PlantUML](https://plantuml.com/)
 
 These extensions allow you to highlight code, display math formulas, flowcharts and more in Markdown, see [Math Formulas](editor/math.md) and [Diagrams](editor/diagrams.md) for basic usage. Please refer to their documentation for more information.