跳到主要内容
项目详情

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 的原价、套餐周期、免费额度或其他付费档位,因此无法进一步确定完整定价方案。

代码编辑页面提供 Code 入口,用于处理 Mermaid 图表代码相关内容。
配置入口页面提供与 Code 并列的 Config 入口。
多种图表类型Sample Diagrams 列出流程图、类图、时序图、架构图、甘特图、时间线等多种图表类型。
工程与业务图表示例列表包含 Git、C4、需求、看板、用户旅程、桑基图和 Wardley Maps 等类型。
语法文档入口页面提供 Docs 链接,链接文字为“View documentation for flowchart diagram”。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Mermaid Live Editor 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500