aipptskill.

daymade Mermaid Tools Skill

从 Markdown 抽取 Mermaid 图并渲染为高分辨率 PNG。适合博客、README、幻灯片等不支持 SVG 的场合。作者:@daymade。

作者: daymade

来源: github.com

安装

npx degit daymade/claude-code-skills/mermaid-tools ~/.claude/skills/mermaid-tools
daymade Mermaid Tools Skill

mermaid-tools 解决一个小但持续的痛点:Mermaid 图在 GitHub 上渲染没问题, 但在其他地方都坏了(多数发布平台、导出 PDF、幻灯片、社交预览)。

它做什么

  • 扫 Markdown,找所有 ```mermaid
  • 每个渲染成可配置分辨率的 PNG
  • 用图的标题作为文件名
  • 默认 2x 或 3x 像素密度,适合 retina 屏

适合什么场景

  • 科技博客:多数平台(Medium、Substack、微信公众号)不渲染 Mermaid
  • README → 社交卡:想分享 repo 架构图时
  • 幻灯片:把 PNG 丢进 PowerPoint 或 Keynote
  • 导出 PDF:Mermaid 在导出时常断;预渲染避免这个

搭配使用

  • excalidraw-diagram / drawio-diagram:需要可编辑输出时
  • wechat-article-writer:把渲染好的图嵌入公众号文章
  • pptx:嵌入幻灯片

GitHub 安装

调用示例

用 mermaid-tools 扫这个 Markdown 文件,找到所有 mermaid 块,
每个渲染成 2x 高清 PNG(博客用)。保存到 ./diagrams/,
文件名跟图的标题对应。

相关 Skill

来自 daymade 的更多 skill