什么是 Mermaid ？

什么是 mermaid-live-editor ？

目前软件的功能主要包括：

• 实时编辑和预览流程图、序列图、甘特图等；
• 将结果保存为 svg 等；
• 获取图表查看器的链接，以便您可以与其他人共享；
• 获取编辑图表的链接，以便其他人可以调整它并发回新链接；

官方提供了在线的 Mermaid Live Editor 供大家体验，地址 ：https://mermaid.live

安装

在群晖上以 Docker 方式安装。

镜像下载

官方没有在 docker hub 上发布镜像，而是发布在 ghcr.io

用 SSH 客户端登录到群晖后，执行下面的命令

# 拉取镜像
docker pull ghcr.io/mermaid-js/mermaid-live-editor:latest

如果没有科学上网，很可能会拉不动，可以试试 docker 代理网站：https://dockerproxy.com/，但是会多几个步骤

# 如果拉不动的话加个代理
docker pull ghcr.dockerproxy.com/mermaid-js/mermaid-live-editor:latest

# 重命名镜像（如果是通过代理下载的）
docker tag ghcr.dockerproxy.com/mermaid-js/mermaid-live-editor:latest ghcr.io/mermaid-js/mermaid-live-editor:latest

# 删除代理镜像（如果是通过代理下载的）
docker tag ghcr.dockerproxy.com/mermaid-js/mermaid-live-editor:latest ghcr.io/mermaid-js/mermaid-live-editor:latest

下载完成后，可以在 映像 中找到

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

# 新建文件夹 mermaid 
mkdir -p /volume1/docker/mermaid

# 进入 mermaid 目录
cd /volume1/docker/mermaid

# 运行容器
docker run -d \
   --restart unless-stopped \
   --name mermaid-live-editor \
   -p 8830:8080 \
   ghcr.io/mermaid-js/mermaid-live-editor:latest

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

version: '3'

services:
  mermaid:
    image: ghcr.io/mermaid-js/mermaid-live-editor:latest
    container_name: mermaid-live-editor
    restart: unless-stopped
    ports:
      - 8830:8080

然后执行下面的命令

# 新建文件夹 mermaid 
mkdir -p /volume1/docker/mermaid

# 进入 mermaid 目录
cd /volume1/docker/mermaid

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

运行

在浏览器中输入 http://群晖IP:8830 就能看到主界面

Sample Diagrams 中有一些示例，例如甘特图、脑图等

History 是历史记录

Actions 可以将 Diagram 分享或者转为图片

参考文档