Mermaid.js在线编辑器使用指南:快速创建和分享图表
你是否还在为复杂的图表绘制工具而烦恼?Mermaid.js在线编辑器让你告别繁琐操作,只需简单的文本描述就能生成专业图表。本文将带你快速掌握Mermaid在线编辑器的使用方法,读完你将能够:创建多种类型的图表、自定义图表样式、导出和分享你的作品。
编辑器核心功能概览
Mermaid在线编辑器是一个基于浏览器的工具,它将文本描述转换为可视化图表。主要包含三个核心区域:代码编辑区、配置面板和预览区。通过这三个区域的协同工作,你可以轻松创建和调整图表。
官方文档:docs/intro/getting-started.md
界面布局
编辑器界面分为三个主要部分:左侧是代码编辑区,你可以在这里输入Mermaid语法;右侧是实时预览区,你的图表会实时显示在这里;顶部是功能按钮区,包含保存、导出等操作。
主要功能特点
- 实时预览:输入代码后立即看到图表效果
- 自动保存:编辑内容会自动保存在浏览器中
- 多种导出格式:支持PNG、SVG和Markdown格式导出
- 丰富的图表类型:支持流程图、时序图、甘特图等多种类型
- 主题切换:内置多种主题供选择
快速上手:创建你的第一个图表
让我们通过一个简单的流程图来快速了解编辑器的使用方法。
步骤1:访问在线编辑器
打开浏览器,访问Mermaid在线编辑器。无需注册登录,即可开始使用。
步骤2:输入图表代码
在左侧代码编辑区输入以下流程图代码:
graph TD
A[开始] --> B{选择图表类型}
B -->|流程图| C[创建流程图]
B -->|时序图| D[创建时序图]
B -->|甘特图| E[创建甘特图]
C --> F[完成]
D --> F
E --> F
F --> G[导出图表]
步骤3:实时预览和调整
输入代码的同时,右侧预览区会实时显示生成的图表。你可以随时修改代码,预览区会立即更新。
步骤4:导出图表
完成图表创建后,点击顶部的"导出"按钮,选择你需要的格式(PNG、SVG或Markdown),图表将下载到你的设备。
图表类型与应用场景
Mermaid支持多种图表类型,适用于不同的场景。以下是几种常用的图表类型及其应用场景。
流程图 (Flowchart)
流程图用于展示流程步骤和决策过程,适用于业务流程、算法步骤等场景。
flowchart LR
A[用户] --> B[登录系统]
B --> C{验证成功?}
C -->|是| D[进入主页]
C -->|否| E[显示错误信息]
D --> F[进行操作]
F --> G[退出系统]
流程图语法文档:docs/syntax/flowchart.md
时序图 (Sequence Diagram)
时序图用于展示对象之间的交互过程,特别适合描述系统组件间的通信。
sequenceDiagram
participant 用户
participant 前端
participant 后端
participant 数据库
用户 ->> 前端: 发送请求
前端 ->> 后端: API调用
后端 ->> 数据库: 查询数据
数据库 -->> 后端: 返回数据
后端 -->> 前端: 返回结果
前端 -->> 用户: 显示内容
时序图语法文档:docs/syntax/sequenceDiagram.md
甘特图 (Gantt Chart)
甘特图用于项目管理,展示任务的时间安排和进度。
gantt
title 项目开发计划
dateFormat YYYY-MM-DD
section 设计阶段
需求分析 :a1, 2023-01-01, 10d
架构设计 :after a1, 15d
section 开发阶段
前端开发 :2023-01-26, 30d
后端开发 :2023-01-26, 30d
section 测试阶段
单元测试 :2023-02-26, 15d
集成测试 :after 单元测试, 15d
甘特图语法文档:docs/syntax/gantt.md
高级功能:自定义与配置
Mermaid编辑器提供了丰富的配置选项,让你可以自定义图表的外观和行为。
主题切换
编辑器内置了多种主题,你可以通过顶部工具栏的"主题"按钮切换。目前支持的主题包括:default、dark、forest和neutral。
主题配置文档:docs/config/theming.md
自定义样式
你可以通过配置面板自定义图表的各种样式,如节点颜色、线条样式、字体大小等。例如,以下配置将流程图节点颜色改为蓝色:
mermaid.initialize({
flowchart: {
nodeColor: '#3498db',
nodeBorderColor: '#2980b9',
nodeTextColor: '#ffffff'
}
});
完整配置选项:docs/config/configuration.md
导入导出功能
除了基本的导出功能,编辑器还支持导入和导出配置,方便你在不同设备间同步设置。
- 导出配置:点击"配置"面板中的"导出配置"按钮,将当前配置保存为JSON文件。
- 导入配置:点击"导入配置"按钮,选择之前保存的JSON文件,即可恢复配置。
协作与分享
Mermaid编辑器提供了多种方式让你与他人协作和分享你的图表。
通过链接分享
你可以通过生成分享链接来与他人共享你的图表。点击顶部的"分享"按钮,会生成一个唯一的URL,他人可以通过这个URL查看你的图表。
嵌入到文档
你可以将图表导出为Markdown格式,然后直接嵌入到GitHub、GitLab等支持Markdown的平台中。导出的Markdown代码如下所示:
任务扩展了模型的能力,同时保持 0.9B 的超紧凑 VLM 规模,具备高效率特性。Python00
KuiklyUI基于KMP技术的高性能、全平台开发框架,具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意:本仓库为Github仓库镜像,PR或Issue请移步至Github发起,感谢支持!Kotlin07
VLOOKVLOOK™ 是优雅好用的 Typora/Markdown 主题包和增强插件。 VLOOK™ is an elegant and practical THEME PACKAGE × ENHANCEMENT PLUGIN for Typora/Markdown.Less00

