Mermaid Live Editor 是一个围绕 Mermaid 图表语法提供编辑入口的在线页面。页面顶部展示了 Code 和 Config 两个区域,并提供 Docs 文档入口;Sample Diagrams 区域集中列出多种图表类型与示例名称。它覆盖的范围不止流程图和时序图,还包括类图、实体关系图、状态图、思维导图、架构图、C4、甘特图、Git 图、时间线、用户旅程、Venn 图和 Wardley Maps 等,适合需要在同一页面查看和编辑不同 Mermaid 图表语法的人使用。页面同时提供 Mermaid Advanced Editor 的入口,OSS 用户可使用指定代码获得折扣,但正文没有给出完整价格、注册要求或账号权限说明。
核心功能
代码编辑入口
页面明确展示 Code 入口,说明编辑页面包含面向代码的操作区域。用户可以从这一入口进入 Mermaid 图表代码相关内容;页面没有进一步说明编辑器的具体快捷键、渲染流程、导入方式或导出格式,因此这些信息不能从当前正文中确定。
配置入口
页面同时展示 Config 入口,与 Code 并列出现。它表明页面提供独立的配置相关入口,但正文没有列出可配置参数、主题选项、布局设置或配置文件格式,使用时能调整哪些内容需要以页面实际界面和 Docs 文档为准。
流程、结构与关系类图表
Sample Diagrams 中列出了 Flowchart、Class、Sequence、Entity Relationship、State、Architecture、Block、C4 和 Requirement。这些名称覆盖流程、类、时序、实体关系、状态、架构、区块、C4 以及需求等图表方向,适合从页面提供的示例类型中选择相应语法继续编辑。正文没有展示每一种图表的具体示例代码或输出限制。
思维导图与业务分析图表
页面列出了 Mindmap、Cynefin Framework、Event Modeling、Kanban、Ishikawa、User Journey、Venn 和 Wardley Maps。其中既有思维导图,也有 Cynefin Framework、事件建模、看板、鱼骨图、用户旅程、维恩图和 Wardley Maps 等名称,可用于查找对应的示例类别。当前正文只提供类型名称,没有进一步解释各图表的适用流程或语法规则。
工程、数据与时间类图表
Sample Diagrams 还包含 Gantt、Git、Packet、Pie、Quadrant、Radar、Railroad(ABNF)、Railroad(EBNF)、Railroad(IR)、Railroad(PEG)、Sankey、Timeline、TreeView、Treemap、XY 和 ZenUML。这一组覆盖甘特图、Git 图、数据包图、饼图、象限图、雷达图、铁路图、桑基图、时间线、树视图、矩形树图、XY 图和 ZenUML。页面通过这些名称展示了可选的图表范围,但没有在正文中说明每种类型的输入字段、渲染限制或导出能力。
使用方式
页面提供 Code 与 Config 入口,并在 Sample Diagrams 区域列出图表示例类型;同时有 Docs 链接,链接文字为“View documentation for flowchart diagram”。正文没有说明是否必须注册、是否支持客户端、浏览器插件、命令行或 API,也没有提到自备模型 Key、导入导出功能或具体操作步骤。页面列出的 Actions 示例包括 Get money、One、Two、Three、Christmas、Go shopping、Let me think、Laptop 和 iPhone,但未说明这些示例的具体用途。
适用人群与场景
需要编辑流程图、类图、时序图、实体关系图或状态图的用户,可以从对应的 Sample Diagrams 类型进入相关方向。需要表达架构、C4、需求、甘特计划、Git 关系、时间线或项目结构的用户,可以参考页面列出的 Architecture、C4、Requirement、Gantt、Git 和 Timeline。需要使用思维导图、看板、鱼骨图、用户旅程、桑基图或 Wardley Maps 等形式的用户,也能在示例列表中找到对应名称。由于页面未提供更具体的用户画像、行业案例或团队协作说明,适用范围仅能依据这些图表类型判断。
定价
页面提供“Try Mermaid Advanced Editor”入口,并明确写有“OSS users get 10% off with code JS26”。这表示 OSS 用户使用代码 JS26 可获得 Mermaid Advanced Editor 的 10% 折扣;正文未列出 Advanced Editor 的原价、套餐周期、免费额度或其他付费档位,因此无法进一步确定完整定价方案。