如何快速上手 Mermaid Live Editor：零基础也能轻松创建流程图的完整指南 🚀

Mermaid Live Editor 是一款强大的在线工具，专为快速编辑、实时预览和分享 Mermaid 图表而设计。无论你是技术文档撰写者、项目管理者还是开发人员，都能通过这款免费工具轻松绘制专业流程图、时序图、甘特图等，让复杂概念可视化变得简单高效。

📋 为什么选择 Mermaid Live Editor？核心优势解析

Mermaid Live Editor 凭借其直观的界面和强大的功能，成为可视化图表创作的理想选择：

• 实时预览：输入代码即刻生成图表，所见即所得 ✨
• 多格式支持：兼容流程图、时序图、类图、状态图等 10+ 图表类型
• 一键分享：生成可分享链接，协作更高效
• 完全免费：开源项目，无需付费即可使用全部功能
• 轻量便捷：无需安装客户端，浏览器直接访问使用

🚀 3 分钟快速启动：两种简单上手方式

方式 1：直接使用在线版本（推荐新手）

无需任何配置，打开浏览器即可开始创作：

1. 访问官方在线编辑器（无需注册）
2. 在左侧编辑区输入 Mermaid 代码
3. 右侧实时查看图表效果，随时调整

方式 2：本地部署（适合开发人员）

通过 Git 克隆仓库并启动本地服务：

git clone https://gitcode.com/gh_mirrors/me/mermaid-live-editor
cd mermaid-live-editor
pnpm install
pnpm dev -- --open

✅ 访问 http://localhost:3000 即可使用本地版编辑器

📁 项目结构全解析：轻松理解核心目录

Mermaid Live Editor 采用清晰的模块化结构，主要目录功能如下：

mermaid-live-editor/
├── src/                  # 源代码核心目录
│   ├── lib/components/   # UI组件（编辑器、预览区等）
│   ├── routes/           # 路由配置（页面导航逻辑）
│   └── app.html          # 应用入口模板
├── static/               # 静态资源（图标、样式等）
├── tests/                # 测试文件（确保功能稳定性）
└── 配置文件区            # 项目设置（依赖、构建等）

核心文件功能速览 🔍

• src/routes/+page.svelte：编辑器主页面组件，包含代码输入区和预览区
• src/lib/util/mermaid.ts：Mermaid 图表渲染核心逻辑
• src/lib/components/Editor.svelte：代码编辑组件（支持语法高亮）
• src/lib/components/View.svelte：图表预览组件（支持缩放和平移）

⚙️ 配置文件详解：定制你的编辑器

项目包含多个关键配置文件，可根据需求调整：

文件名	功能描述	新手调整建议
package.json	项目依赖和脚本配置	如需添加功能可修改 dependencies
vite.config.js	Vite 构建工具配置	开发环境优化相关设置
svelte.config.js	Svelte 框架配置	组件编译选项调整
docker-compose.yml	Docker 部署配置	本地服务端口映射修改

📝 实用操作指南：提升创作效率的 5 个技巧

1. 快速导入示例图表

点击编辑器顶部「Preset」按钮，选择预设模板（如流程图、时序图），立即获得可修改的示例代码，省去从零开始的麻烦。

2. 一键导出图表

完成创作后，通过「Actions」菜单：

• 导出为 SVG/PNG 图片
• 生成永久分享链接
• 复制代码到剪贴板

3. 使用键盘快捷键

提高效率的常用快捷键：

• Ctrl+S：保存当前图表
• Ctrl+Z：撤销操作
• Ctrl+Y：重做操作
• Ctrl+D：复制选中代码行

4. 主题切换

点击右上角「Theme」图标，支持：

• 浅色/深色模式切换
• 多种预设主题选择
• 自定义背景颜色

5. 历史记录功能

编辑器自动保存修改历史，通过「History」按钮：

• 查看过往编辑版本
• 一键恢复之前状态
• 对比不同版本差异

🐳 Docker 部署指南：打造专属编辑器服务

对于团队使用或离线场景，推荐通过 Docker 部署：

快速启动官方镜像

docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor

访问 http://localhost:8000 即可使用

自定义构建镜像

docker build -t my-mermaid-editor .
docker run --detach --name mermaid-service --publish 8080:8080 my-mermaid-editor

🛠️ 常见问题解决方案

Q：图表渲染异常怎么办？

A：检查代码语法是否正确，可通过「帮助」菜单查看官方语法文档

Q：本地部署提示依赖错误？

A：确保已安装 Node.js (LTS版本) 和 pnpm：

corepack enable pnpm  # 安装pnpm
pnpm install --force  # 强制重新安装依赖

Q：如何禁用分析功能？

A：修改构建参数：

docker build --build-arg MERMAID_ANALYTICS_URL= -t mermaid-editor .

🎯 总结：开启高效图表创作之旅

Mermaid Live Editor 以其简洁的界面、强大的功能和灵活的部署方式，成为技术图表创作的必备工具。无论是快速绘制流程图，还是复杂的系统架构图，都能轻松应对。立即访问在线版本，或通过本地部署打造专属工作流，让可视化创作变得简单高效！

🌟 开源项目贡献指南：项目欢迎所有人参与开发，核心代码位于 src/lib/ 目录，可通过提交 PR 贡献功能改进或 bug 修复。