如何运作 编写美人鱼语法，佩雷将其呈现为 SVG。尝试编辑下面的示例。美人鱼流程图 TD A [ 美人鱼文本 ] --> B { 流程图？ } B -- 是 --> C [ 佩雷 ] B -- 否 --> D [ 美人鱼 ] C --> E ([ SVG ]) D --> E 使用 CSS 变量设置颜色和字体。颜色更改可在不重新渲染的情况下应用。CSS .pele { --pele-bg : #fffcf0 ; --pele-fg : #100f0f ; --pele-muted : #6f6e69 ; --pele-line : #100f0f ; --pele-surface : #f2f0e5 ; --pele-surface-alt : #e6e4d9 ; --pele-border : #cecdc3 ; } 佩雷主题变量 明亮 黑暗 为什么选择佩雷？零依赖，比 Mermaid.js 小 6 倍，速度快 500 倍。佩雷支持 Mermaid 12.1.0 中内置的每种图表类型。 佩雷 美人鱼.js 包大小 gzip 230 kB 1.6 MB 渲染时间 0.05–0.3 毫秒 6–82 毫秒 直接依赖 0 23 小屏幕 适应布局 缩放图表 主题 CSS 变量 主题配置 将佩雷添加到你的应用程序中 使用 API 将佩雷添加到你的应用程序中。 . npm install pele 将美人鱼语法传递给 render() 并将返回的 SVG 插入到你的页面中。 import { render } from ' pele ' ; const { svg } = render ( ` flowchart LR A[美人鱼文本] --> B[SVG] ` ) ; document . querySelector ( ' #diagram ' ) . innerHTML = svg ; 探索示例 浏览所支持的图表类型。 API 在您的应用中渲染图表。 主题 使用 CSS 变量设置颜色和字体。 兼容性 与美人鱼比较语法、布局和功能。 佩雷在使用中 佩雷是开源的，专为 Obsidian 开发，以快速渲染图表并匹配您的主题。它以佩雷命名，佩雷是火山和火焰的女神。