mcpField
D
diagram-skills

diagram-skills

github.com/wentoraiデザイン・UI307175 回インストール19 週間前に更新
リポジトリ

diagram-skills について

Mermaid、PlantUML、Excalidraw、tldrawなどを使う、図表作成・可視化向けの9つのスキル集です。コード、テキスト、データをフローチャートや構成図などの視覚資料にする人を対象としています。

主な機能

  1. 01Mermaidによるコードフローの可視化
  2. 02テキストからExcalidraw図を作成
  3. 03JSON CrackでJSON構造を可視化
  4. 04Kroki経由で図を生成
  5. 05複数図を使ったMermaid構成設計
  6. 06Mermaidのフロー図・シーケンス図作成
  7. 07PlantUMLによるUML図の作成
  8. 08科学イラストの作成
  9. 09tldrawによるホワイトボード図の作成

活用シーン

  1. 01PythonやJavaScriptの関数をフローチャートに変換
  2. 02テキストの説明から図をレンダリング
  3. 03複雑なJSON構造を視覚的に確認
  4. 04科学的な模式図やグラフィカルアブストラクトの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/wentorai/research-plugins --skill diagram-skills

インストール後、Claude Code で/diagram-skillsを入力して読み込まれたか確認します。

詳細

図表とビジュアル — 9 個のスキル

ユーザーのニーズに合ったスキルを選び、read でその SKILL.md を読みます。

スキル説明
code-flow-visualizerPython、JavaScript、TypeScript の関数を Mermaid のフローチャートに変換します
excalidraw-diagram-guideテキストによる説明から、手描き風の Excalidraw 図を生成します
json-data-visualizer複雑な JSON データ構造を可視化するための JSON Crack ガイドです
kroki-diagram-apiKroki のマルチフォーマット描画 API を使って、テキストから図を生成します
mermaid-architect-guide高度な Mermaid 構文を使って、複雑なマルチ図アーキテクチャを設計します
mermaid-diagram-guideMermaid を使ってフローチャート、シーケンス図、アーキテクチャ図を作成します
plantuml-guidePlantUML を使って UML 図とアーキテクチャの可視化を作成します
scientific-illustration-guideグラフィカルアブストラクト、模式図、科学イラストを作成します
tldraw-whiteboard-guide無限キャンバスでのホワイトボード作成や図の作成に使う tldraw のガイドです

コメント

Markdown 対応