format-rich-html-diagram
コード、アーキテクチャ、React コンポーネント構造、データフロー、状態管理、シーケンス、処理フロー、依存関係、ディレクトリ階層などを、SVG、2D、3D、アニメーション、CDN ライブラリを使ったリッチな単一 index.html として可視化・整理するときに使う。開発者がブラウザで index.html だけを開けば全体像、詳細、関係性、判断材料を理解できる成果物を作る必要がある場合は必ず使う。Markdown だけでは構造や流れを把握しづらい設計説明、コードリーディング結果、実装計画、レビュー補助資料、オンボーディング資料に使う。
适合你，如果需要用浏览器打开一个HTML就能看清代码结构、架构或数据流。
/ 下载安装
/ 通过 npx 安装 校验哈希
npx oh-my-skill add version-1/agents-docs/format-rich-html-diagram/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- version-1/agents-docs/format-rich-html-diagram/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify version-1/agents-docs/format-rich-html-diagram安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
2GitHub stars
~4.6K最小装载
~4.6K含声明引用
~5.1K文本包总量
索引托管
怎么用
商店整理自技能原文 · 版本 137ed3f · 表述以原文为准它做什么
安装后，Claude 会将代码、架构、组件结构、数据流等整理成一个单独的 index.html 文件，包含 SVG、2D/3D 图、动画等，方便在浏览器中直观查看。
什么时候触发
当你需要可视化代码结构、架构、数据流或依赖关系，且希望用丰富的图表（如流程图、组件树、3D 图）来理解时触发。
装好后可以这样说
生成包含组件树的 index.html。
生成 3D 架构图。
生成流程图。
评论
登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…