Mermaid.js 开源库与市场地位 - 核心产品是一个用于通过代码绘制图表的开源 JavaScript 库，提供“代码即图表”的体验，支持流程图、时序图、类图等多种图表类型 [1][2] - 该产品自2015年左右发布以来广受欢迎，在 GitHub 上已获得超过 85k stars，显示出强大的社区影响力和市场认可度 [3] - 对于开发者、产品经理和技术作者而言，该产品已成为近乎刚需的工具，被广泛集成于技术文档、Markdown 编辑器以及 Obsidian、Notion、Typora 等流行应用中 [5] 官方工具的用户体验痛点 - 官方提供了功能稳定的在线编辑器，支持编写代码、实时预览和导出图片 [7] - 然而，官方编辑器界面设计陈旧，主题单一，导出的图表风格偏向工程风，美观度不足，难以直接用于PPT或设计稿 [9][10] 针对体验优化的开源项目概览 - 市场出现了多个旨在优化 Mermaid 使用体验的开源项目，其核心思路是不改变 Mermaid 语法，而是专注于提升视觉体验和易用性 [12] - 主要项目包括 beautiful-mermaid、Pretty Mermaid Skills 和 Modern Mermaid [13][18][25] beautiful-mermaid 项目 - 这是一个用 TypeScript/JavaScript 编写的开源库，旨在将 Mermaid 图表渲染成美观的 SVG 图像或基于文本的 ASCII/Unicode 图形 [14] - 该库设计为轻量、快速且可主题化，能够在浏览器、Node.js、终端及AI工具等多种JavaScript环境中运行 [15] - 提供了 npm 安装包、生成 SVG 和 ASCII 图形的API，以及通过CDN在浏览器中使用的方案 [17] Pretty Mermaid Skills 项目 - 这是一个围绕 Mermaid 图表渲染能力构建的开源 AI Skill 项目，旨在让 Claude、Cursor、ChatGPT 等 AI 工具能够自动生成美观的 Mermaid 图表 [19] - 其本质是将 beautiful-mermaid 的美化引擎封装成一个 AI 可调用的插件或技能接口，使AI在生成图表时能自动应用漂亮的主题和样式，无需用户手动配置 [20][22][23] Modern Mermaid 项目 - 这是一个基于 React 构建的现代化 Web 编辑器，它构建在 Mermaid.js 核心之上，提供了一个完整的图形化界面来编写、预览和导出图表 [25][27] - 虽然项目较新，在 GitHub 上仅有 200 多个 stars，但已获得开发者社区的积极反馈 [29] Modern Mermaid 的核心特点：主题与视觉 - 提供了超过 10 种专业级主题方案，涵盖线性商务风、工业风、手绘风格、吉卜力风格和复古主题等，彻底改变了原工具的工程审美 [30][31] - 支持自定义背景（如渐变色、纯色、底纹图案）和多种程序员喜爱的字体（如 Fira Code、JetBrains Mono） [31] - 提供丝滑的暗黑模式支持，并可随系统自动切换 [31] Modern Mermaid 的核心特点：编辑与导出 - 编辑器具备智能特性，如实时语法高亮、自动补全和行号显示，编辑区与预览区支持自由拖拽布局 [35][36] - 支持以 3 倍分辨率超清导出，并支持导出透明底 PNG，便于嵌入 PPT 或网页，同时支持一键复制到剪贴板和批量导出 [37] Modern Mermaid 的核心特点：功能与兼容性 - 完美兼容 Mermaid.js 的所有图表类型，包括流程图、时序图、类图、状态图、ER图、甘特图、饼图、思维导图等 [41][42] - 提供了丰富的交互功能，如缩放、平移、全屏模式，支持通过右键直接修改节点颜色，并自带多语言界面支持 [41] - 内置标注工具（箭头、矩形、圆形、文字），颜色可自动适配当前主题 [41] Modern Mermaid 的安装与使用 - 用户可以直接在线访问使用，无需安装 [45] - 也支持本地部署，需要 Node.js 20.19+ 或 22.12+ 版本，并提供了使用 pnpm、npm 等包管理器的详细安装和构建步骤 [46][47][48] - 项目技术栈包括 React 19.2、TypeScript 5.9、Vite 7.2、Tailwind CSS 4.1、Mermaid.js 11.12 等 [48][49]