@aparte/plugin-mermaid

中文文档
1.0.0发布于 2026/11/07MITTypeScriptES Module零依赖构建来源已验证近 30 天下载 2410

通过"人鱼"(Mermaid)取出分道扬镳的图表——以一幅被沙盒取出的形象取出为栅栏溪流.

中文使用文档
文档目录5 节
  1. 一个图像,所以它里没有任何东西 可以在页面上行动
  2. 当一个回复流
  3. 聊天的颜色
  4. 选项
  5. 两个切入点

@aparte/plugin-美人鱼

图表 独立 通过 美人鱼。 。 。 . 每个 ```mermaid 答题中的栅栏被画成一个图表——它流出,以 安装了 Markdown 提供者, 或者没有 .

A Mermaid flowchart drawn from a fence, in an aparté chat
npm install @aparte/plugin-mermaid @aparte/core mermaid
import { setupMermaid } from '@aparte/plugin-mermaid';

setupMermaid();

@aparte/core 财务报告和审定财务报表 mermaid (11.16.1或后期)为 同行依赖关系。美人鱼装入 第一张图,不是之前的, 和一张图只有在它靠近屏幕时才被绘制,所以 打开长话短说.

一个图像,所以它里没有任何东西 可以在页面上行动

每个图表都是 <img> (原始内容存档于2019-10-21) (英语). Official website 浏览器绘制一个图像的 SVG 没有脚本也没有 访问页面,因此,一个模型所写的标签和图中的样式都无法运行 围绕它聊天。 美人鱼也跟着跑 securityLevel: 'strict' 关闭 HTML 标签,并 a 图表本身 %%{init}%% 无法恢复.

美人鱼画在图像存在之前, 在页面中, 以及那里获取的图表名称 那一刻。 三事名为相. 节点或演员自己的: A@{ shape: imageSquare, img: "https://…" } 或序列图 properties A: {"icon": "https://…"} 将会向该地址发出一个请求,所以 插件询问美人鱼解析到什么, 并询问一个不内含图片的图表 (单位:千美元)data:image/…虽然来源作了拼写,但没有绘制。 标签美人鱼写作 HTML 偶数 关闭 HTML 标签, 例如架构服务的图标文本: 它通过美人鱼自己的 禁止图片、玩家、帧和样式的消毒剂 %%{init}%% 无法升起。 一个风格: classDef c mask-image:url(https://…) 在一个状态或块图中,一旦测量到该图就立即取出,所以一个源有 CSS url(, (中文(简体) ), image-set( 或者说 cross-fade( (或一个 @import)不是被画出,也不是被画出 某种东西,并持有回击 逃脱,这可以拼出一个。 未绘制的图表显示其 来源和无法绘制的注释。 无法询问的美人鱼对象 所诠释之事setupMermaidWith ) 回到只拒绝文本的状态 拒绝在图中标出“ img” 的标签, 并带有形状数据和使用单词的序列图 properties 或者说 details。 。 。 .

成本:无法选择图中的文本,它被设置在系统字体中, 由于图像无法装入页面。 所绘制的图表保存着它的代码卡,所以复制按钮复制了它的出处.

当一个回复流

该图是随着栅栏的到来重新绘制的——最多每300米,或只要最后的 画取了——并保留了最后一个解析的版本. 一旦栅栏关闭,一个图表 不分析注释及其来源.

聊天的颜色

图表取自聊天主题的颜色( T)--aparte-bg, (中文(简体) ), --aparte-text, (中文(简体) ), --aparte-primary),当主题改变时再次被绘制. 它的替代文字是图自己的 accTitle 或者说 accDescr,其他“数字”;设置 diagramAlt 财务报告和审定财务报表 diagramError 与 extendLocale() 来翻译倒数和错误注释.

选项

setupMermaid(options?, config?) 带 MermaidOptions数字 :

选项默认
progressivetruefalse 栅栏关闭后绘制图
mermaid{}美人鱼自己的配置:a flowchart 曲线, themeVariables.

两个切入点

@aparte/plugin-mermaid 在第一个图表中输入人鱼。 把它交给自己,使用 输入的条目 mermaid数字 :

import mermaid from 'mermaid';
import { setupMermaidWith } from '@aparte/plugin-mermaid/core';

setupMermaidWith(mermaid);

setupMermaidWith 以实例为例,或函数返回承诺,以及任何对象 形状像 MermaidLike (单位:千美元)initialize, (中文(简体) ), parse, (中文(简体) ), render) (中文(简体) ). 这两个功能都返回了处置者.

美人鱼为整页保留一个配置,插件调用 initialize 联合国 在它绘制的每一幅图之前拥有它。 如果您的页面还绘制了相同的图表 美人鱼,呼叫 mermaid.initialize(yourConfig) 在你之前 render() 或者说 run()。 。 。 .

仅限无害环境管理.

版本与发布记录

@aparte/plugin-mermaid 共发布 15 个版本,首次发布于 2026/10/29;过去 12 个月发布了 15 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
1.0.0latest2026/11/07今天
0.32.12026/11/025 天前
0.32.02026/11/025 天前
0.31.02026/11/026 天前
0.30.12026/11/016 天前
0.30.02026/11/016 天前

关于 @aparte/plugin-mermaid 的常见问题

@aparte/plugin-mermaid 是什么?

通过"人鱼"(Mermaid)取出分道扬镳的图表——以一幅被沙盒取出的形象取出为栅栏溪流.

如何安装 @aparte/plugin-mermaid?

在项目目录运行 npm install @aparte/plugin-mermaid,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:mermaid(^11.16.1)、@aparte/core(>=1.0.0 <2.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@aparte/plugin-mermaid 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@aparte/plugin-mermaid 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@aparte/plugin-mermaid 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js >=18。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@aparte/plugin-mermaid 可以商用吗?

@aparte/plugin-mermaid 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@aparte/plugin-mermaid 的下载量有多少?

根据 npm 官方下载统计,@aparte/plugin-mermaid 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,410 次,日均约 80 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@aparte/plugin-mermaid 还在维护吗?

最新版本 1.0.0 发布于 2026/11/07(今天);至今共发布 15 个版本,其中过去 12 个月发布了 15 个;首次发布于 2026/10/29。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。