Mermaid Live Editor 在线图表编辑工具完全指南

Mermaid Live Editor 在线图表编辑工具完全指南

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor

项目概述

Mermaid Live Editor 是一款基于文本的在线图表编辑器，采用 Svelte Kit 框架构建，支持实时编辑和预览各种类型的 Mermaid 图表。通过简洁的文本语法，用户可以快速创建专业的流程图、时序图、甘特图等可视化内容。

核心特性

• 实时编辑预览：支持流程图、时序图、甘特图等多种图表的实时编辑与预览
• 多种导出格式：可将图表结果保存为 SVG 格式
• 便捷分享功能：生成图表查看链接便于与他人分享，或生成编辑链接让他人调整后返回新链接

快速部署指南

本地开发环境搭建

系统要求：

• Node.js 当前 LTS 版本
• pnpm 包管理器

安装步骤：

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

Docker 容器化部署

快速启动：

docker run --detach --name mermaid-live-editor --publish 8080:8080 mermaid-js/mermaid-live-editor

开发模式：

docker compose up --build

访问地址：http://localhost:8080 或 http://localhost:3000

应用场景深度解析

软件开发与架构设计

在软件开发过程中，Mermaid Live Editor 可用于创建系统架构图、模块关系图、数据流程图等，帮助开发团队更好地理解和沟通系统设计。

项目管理与进度跟踪

利用甘特图功能，项目经理可以清晰地展示项目里程碑、任务分配和进度安排，提高项目管理效率。

教育培训与知识传递

教师和学生可以使用该工具创建学习流程图、概念关系图等教学辅助材料，使知识传递更加直观有效。

配置与定制化

渲染服务配置

构建时可通过 MERMAID_RENDERER_URL 参数配置渲染服务地址，默认为 https://mermaid.ink。设置为空字符串可禁用 PNG 和 SVG 链接。

Kroki 实例配置

通过 MERMAID_KROKI_RENDERER_URL 参数配置 Kroki 实例地址，默认为 https://kroki.io。

数据分析配置

构建时设置 MERMAID_ANALYTICS_URL 和 MERMAID_DOMAIN 参数来启用数据分析功能。

开发与测试

开发命令

• 开发服务器：pnpm dev
• 强制开发模式：pnpm dev:force
• 代码检查：pnpm lint
• 代码格式化：pnpm format

测试套件

• 单元测试：pnpm test:unit
• 端到端测试：pnpm test:e2e
• 测试覆盖率：pnpm test:unit:coverage

项目架构与技术栈

该项目采用现代化的技术栈构建：

• 前端框架：Svelte 5 + Svelte Kit
• 构建工具：Vite
• 样式方案：Tailwind CSS
• 代码编辑器：Monaco Editor + CodeMirror
• 测试框架：Vitest + Playwright

部署与发布

项目使用 Netlify 进行持续部署。当针对主分支创建 PR 时，Netlify 会自动构建和部署，并在 PR 评论中显示部署 URL。PR 合并后会自动发布到生产环境。

Mermaid Live Editor 为技术文档编写、系统设计、项目管理等场景提供了强大的可视化支持，通过简洁的文本语法即可生成专业级图表，极大地提升了工作效率和沟通效果。

【免费下载链接】mermaid-live-editorEdit, preview and share mermaid charts/diagrams. New implementation of the live editor.项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor