Pele – 美人鱼图作为主题 SVG

编写 Mermaid 语法，Pele 将其渲染为 SVG。尝试编辑下面的示例。 1 流程图 TD 2 A [ 美人鱼文本 ] --> B { 流程图？ } 3 B -- 是 --> C [ Pele ] 4 B -- 否 --> D [ 美人鱼 ] 5 C --> E ([ SVG ]) 6 D --> E 是 否 美人鱼文本流程图？ Pele Mermaid SVG 使用 CSS 变量设置颜色和字体。颜色更改无需重新渲染即可应用。 1 .pele { 2 --pele-bg : #fffcf0 ; 3 --pele-fg : #100f0f ; 4 --pele-静音 : #6f6e69 ; 5 --pele-line : #100f0f ; 6 --pele-surface : #f2f0e5 ; 7 --pele-surface-alt : #e6e4d9 ; 8 --pele-border : #cecdc3 ; 9 } Pele 主题变量 Light Dark 为什么选择 Pele？与 Mermaid.js 相比，零依赖、体积缩小 6 倍、速度提高 500 倍。 Pele 支持 Mermaid 12.1.0 中内置的每种图表类型。 Pele Mermaid.js 捆绑包大小 gzip 230 kB 1.6 MB 渲染时间 0.05–0.3 ms 6–82 ms 直接依赖项 0 23 小屏幕 调整布局 缩放图表 主题化 CSS 变量 主题配置 使用 API 将 Pele 添加到您的应用程序。 npm pnpm Yarn Bun 将 Mermaid 语法传递给 render() 并将返回的 SVG 插入到您的页面中。 1 从 'pele' 导入 { render } ； 2 3 const { svg } = render ( ` 流程图 LR 4 A[美人鱼文本] --> B[SVG] ` ) ; 5 6 文件。查询选择器('#diagram')。内部 HTML = svg ; Pele 的使用 Pele 是开源的，专为 Obsidian 开发，可快速渲染图表并匹配您的主题。它以火山和火焰女神贝利（Pele）的名字命名。