0
点赞
收藏
分享

微信扫一扫

用AI辅助生活,解决人类难题,智能未来,未来已来

星河出山 2024-01-28 阅读 32

在这里插入图片描述

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

在这里插入图片描述

参考文档

举报

相关推荐

0 条评论