什么是 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
分享或者转为图片