TingYu Tools

Mermaid 预览

流程图/时序图

输入代码

支持流程图、时序图、类图、状态图等多种图表

快速模板

显示选项

💡 使用说明

什么是 Mermaid?

Mermaid 是一个基于 JavaScript 的图表和图形工具,可以使用文本和代码创建流程图、时序图、甘特图等多种图表,类似于 Markdown 的思想。

功能特点

  • 使用简单的文本语法创建复杂图表
  • 支持多种图表类型
  • 实时预览和编辑
  • 可导出为 SVG 或 PNG 格式

图表类型

  • 流程图(Flowchart)
  • 时序图(Sequence Diagram)
  • 类图(Class Diagram)
  • 状态图(State Diagram)
  • 实体关系图(ER Diagram)
  • 甘特图(Gantt Chart)
  • 饼图(Pie Chart)
  • Git 图(Git Graph)

应用场景

  • 软件设计文档和架构图
  • 项目流程和业务流程图
  • 系统时序和交互图
  • 数据库关系图
  • 项目进度管理

最佳实践

  • 保持图表简洁,避免过于复杂
  • 使用有意义的标签和描述
  • 合理使用子图和分组
  • 选择合适的图表类型表达意图
  • 定期更新图表以反映最新状态

预览结果

开始

是否登录?

显示主页

跳转登录页

结束