johnsinclair73/mermaid-live-editor

Mermaid Live Editor Docker镜像

镜像概述和主要用途

Mermaid Live Editor是一个基于Web的工具，用于实时编辑和预览Mermaid图表。Mermaid是一种文本驱动的图表绘制语言，支持流程图、时序图、类图、状态图等多种图表类型。本Docker镜像提供了Mermaid Live Editor的容器化部署方案，方便用户在本地环境快速搭建图表编辑环境，无需依赖在线服务，确保数据隐私和使用便捷性。

核心功能和特性

• 实时编辑与预览：提供即时反馈的编辑界面，输入Mermaid语法后可实时查看图表效果
• 多图表类型支持：兼容Mermaid支持的所有图表类型，包括流程图、时序图、类图、状态图等
• 本地部署：通过Docker容器化部署，无需复杂配置，快速启动
• 多架构支持：支持linux/amd64和linux/arm64架构，适应不同硬件环境
• 轻量级运行：资源占用低，适合个人或团队内部使用

使用场景和适用范围

• 开发团队：用于设计系统架构图、流程图、API调用时序图等
• 技术文档编写者：为文档创建直观的图表说明
• 教育工作者：教学中绘制概念图、流程说明图
• 需要数据隐私的场景：本地部署避免图表数据上传至第三方服务器

使用方法和配置说明

构建多架构镜像（可选）

如需自行构建镜像，可参考以下步骤：

准备多架构构建环境（一次性操作）

参考文档：在Docker Desktop上交叉构建ARM64镜像

bash
docker buildx ls
docker buildx create --name newbuilder
docker buildx use newbuilder
docker buildx inspect --bootstrap

构建多架构镜像

bash
git clone https://github.com/mermaid-js/mermaid-live-editor.git
cd mermaid-live-editor

# 注意：当前linux/arm/v7架构构建会失败，错误信息：
#30 154.2 [FAILED] URL: https://download.cypress.io/desktop/8.0.0?platform=linux&arch=ia32
#30 154.2 [FAILED] Error: Failed downloading the Cypress binary.
#30 154.2 [FAILED] Response code: 404
#30 154.2 [FAILED] Response message: Not Found

# 构建支持amd64和arm64架构的镜像
docker buildx build --platform linux/arm64,linux/amd64 --push -t johnsinclair73/mermaid-live-editor:8.14.0 .

使用Docker运行

直接使用现成镜像启动容器：

bash
docker run --name mermaid-live-editor --publish 8080:80 johnsinclair73/mermaid-live-editor:8.14.0

• --name mermaid-live-editor：指定容器名称
• --publish 8080:80：将容器内80端口映射到宿主机8080端口，可根据需要修改宿主机端口
• 启动后访问 http://localhost:8080 即可使用

Docker Compose配置

创建docker-compose.yml文件：

yaml
version: "2.0"
services:
  mermaid:
    image: johnsinclair73/mermaid-live-editor:8.14.0
    container_name: mermaid-live-editor
    restart: unless-stopped  # 除非手动停止，否则容器退出后自动重启
    ports:
      - "8280:80"  # 宿主机端口:容器端口，可根据需要修改宿主机端口

启动服务：

bash
docker-compose up -d

Kubernetes部署

创建mermaid-deployment.yaml配置文件：

yaml
apiVersion: v1
kind: Namespace
metadata:
  name: mermaid  # 创建专用命名空间
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: mermaid
  namespace: mermaid
spec:
  replicas: 1  # 副本数
  selector:
    matchLabels:
      app: mermaid
  template:
    metadata:
      labels:
        app: mermaid
    spec:
      containers:
        - name: mermaid
          image: johnsinclair73/mermaid-live-editor:8.14.0
          ports:
            - containerPort: 80  # 容器内端口
          resources:
            requests:  # 资源请求
              memory: "64Mi"
              cpu: "250m"
            limits:  # 资源限制
              memory: "128Mi"
              cpu: "500m"
---
apiVersion: v1
kind: Service
metadata:
  name: mermaid
  namespace: mermaid
spec:
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: mermaid
  type: ClusterIP  # 集群内部访问
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: mermaid
  namespace: mermaid
  annotations:
    kubernetes.io/ingress.class: "nginx"  # 使用nginx ingress控制器
    nginx.ingress.kubernetes.io/backend-protocol: "HTTP"
spec:
  rules:
    - host: <yourdns>  # 替换为实际域名
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: mermaid
                port:
                  number: 80

部署命令：

bash
kubectl apply -f mermaid-deployment.yaml

部署后通过配置的域名（替换<yourdns>）访问服务。