mermaid-compact 是做什么的？
将 mermaid.js 打包成一个独立的 ESM 文件，无运行时依赖且无延迟加载块，实现更快部署。
概述
此技能将流行的图表库 mermaid.js 打包为一个自包含的 ESM 文件。生成的 bundle 不包含任何外部运行时依赖，且没有延迟加载的代码块，从而确保快速、可靠的加载。
主要特性
- 独立 ESM 文件：所有 mermaid 代码及其内部依赖都合并到一个
.mjs文件中。 - 无运行时依赖：无需安装或加载额外的 npm 包。
- 无延迟加载块：所有图表类型和功能都包含在单个文件中，无动态
import()调用。 - 更快部署：减少 HTTP 请求次数，优化缓存，简化部署流程。
使用方法
从 CLI 生成 bundle
npx sanderschinchy506/mermaid-compact
此命令会生成 mermaid.esm.mjs 文件，你可以直接在你的项目中使用。
在 HTML 中使用
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
支持平台
- 所有支持 ESM 的现代浏览器（Chrome、Firefox、Safari、Edge）
- Node.js（版本 12 及以上）
- Deno 和 Bun
工作原理
该技能使用 rollup 将 mermaid.js 的核心代码及其依赖（如 d3、dagre-d3 等）打包成一个单一的 ESM 输出文件。通过配置 output.inlineDynamicImports 为 true，消除了所有延迟加载的块。最终输出是一个可立即使用的模块。
与原始 mermaid.js 的对比
| 特性 | 原始 mermaid.js | mermaid-compact |
|---|---|---|
| 文件数量 | 多个文件（核心 + 插件 + 样式） | 单个 .mjs 文件 |
| 运行时依赖 | 有 | 无 |
| 延迟加载 | 是（按需加载图表类型） | 否（所有代码内联） |
| 部署复杂度 | 需要构建工具或 CDN 配置 | 直接引用单文件 |
注意事项
- 由于所有图表类型都内联在 bundle 中，文件结构可能比按需加载的 mermaid.js 稍大。
- 适用于大多数常见图表类型，但不支持需要额外运行时资源的极高度自定义插件。
许可证
此技能按原样提供，未经明确授权，请勿用于商业用途。详情请参阅原始 mermaid.js 许可证。