Joplin markdown如何描绘脑图和程序图等功能图

简介

Joplin 通过第三方插件，支持了脑图（mindmap）、时序图、DAG 等等一些功能图形，不过类似于 markdown 语法的写法，可能一开始会花时间去熟悉各种语法，不能像xmind 这种可以直接编辑的方式，还是会消耗不少时间来处理效果图。

• mermaid：https://mermaid-js.github.io/mermaid/#/README

• 它是一个基于 Javascript 的图表和图表工具，它呈现受 Markdown 启发的文本定义以动态创建和修改图表。

• plantuml：https://plantuml.com/zh/

• 图形是用一种简单直观的语言定义的。

• 图像可以生成PNG、SVG或LaTeX格式。也可以生成ASCII艺术图（只针对序列图）

安装

这里有两种使用方式，一种是 plantuml，另一种是 mermaid，翻译过来是美人鱼。

• mermaid：内置，不需要装插件

• plantuml：https://github.com/marc0l92/joplin-plugin-plantUML#readme

• 打开 Joplin > Options > Plugins > Install

默认公用的语法解析平台有时候会因为网络或者访问负载导致你本地的解析慢，我们可以考虑自己搭建一个plantuml server 作为解析使用。

plantuml-server

https://github.com/plantuml/plantuml-server

简单尝试了一下，如果nginx只能用80和443端口，否则静态文件访问会有问题，so。。。

docker启动命令：docker run -d -p 18083:8080 plantuml/plantuml-server

语法介绍

📢：这里只介绍在Joplin里面的用法，其他环境不做测试。

plantuml：https://plantuml.com/zh/

在线体验编辑器：https://www.plantuml.com/plantuml/

语法示例：

```plantuml
plantuml 语法
```

mermaid：

在线体验编辑器：https://mermaid.live/

语法示例：

```mermaid
mermaid 语法
```

时序图（Sequence Diagram）

https://plantuml.com/en/sequence-diagram

https://mermaid-js.github.io/mermaid/#/sequenceDiagram

用例图（Use Case Diagram）

https://plantuml.com/en/use-case-diagram

类图（Class Diagram）

https://plantuml.com/zh/class-diagram

https://mermaid-js.github.io/mermaid/#/classDiagram?id=comments

活动图（Activity Diagram）

当前语法（ legacy）

https://plantuml.com/en/activity-diagram-legacy

新语法

https://plantuml.com/zh/activity-diagram-beta

新的语法将会替换旧的语法。然而考虑到兼容性，旧的语法仍能够被使用以确保向前兼容。

流程图（Flowcharts）

https://mermaid-js.github.io/mermaid/#/flowchart

组件图（Component Diagram）

https://plantuml.com/zh/component-diagram

状态图（State Diagram）

https://plantuml.com/en/state-diagram

https://mermaid-js.github.io/mermaid/#/stateDiagram

对象图（Object Diagram）

https://plantuml.com/zh/object-diagram

部署图（Deployment Diagram）

https://plantuml.com/zh/deployment-diagram

定时图（Timing Diagram）

https://plantuml.com/en/timing-diagram

网络图（Network diagram (nwdiag)）

https://plantuml.com/en/nwdiag

线框图（Salt (Wireframe)）

https://plantuml.com/en/salt

拱形图（Archimate Diagram）

https://plantuml.com/en/archimate-diagram

甘特图（Gantt Diagram）

https://plantuml.com/zh/gantt-diagram

https://mermaid-js.github.io/mermaid/#/gantt

思维导图（MindMap）

https://plantuml.com/en/mindmap-diagram

工作分解结构图（Work Breakdown Structure (WBS)）

https://plantuml.com/en/wbs-diagram

JSON数据显示效果图（Display JSON Data）

https://plantuml.com/zh/json

YAML数据显示效果图（Display YAML Data）

https://plantuml.com/zh/yaml

实体关系图（Entity Relationship Diagrams）

https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram

用户旅程图（User Journey Diagram）

https://mermaid-js.github.io/mermaid/#/user-journey

饼图图表（Pie chart diagrams）

https://mermaid-js.github.io/mermaid/#/pie

需求图（Requirement Diagram）

https://mermaid-js.github.io/mermaid/#/requirementDiagram