mcpField
D
diagram-monochrome

diagram-monochrome

github.com/paulrbergデザイン・UI102113 回インストール今日更新
リポジトリ

diagram-monochrome について

システム、サプライチェーン、ソフトウェアやハードウェアの構成を説明するための、モノクロ技術図の作成スキルです。左から右への流れ、ラベル付きの枠、矢印で関係を見やすく示します。

主な機能

  1. 01白黒の線画スタイル
  2. 02左から右へのフロー配置
  3. 03枠と矢印による関係表示
  4. 04短い大文字ラベル
  5. 05陰影や雑然さを排除

活用シーン

  1. 01ソフトウェアやハードウェアの構成図作成
  2. 02業界やサプライチェーンの流れの説明

インストール

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

$npx skills add https://github.com/paulrberg/agent-skills --skill diagram-monochrome

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

詳細

モノクロの技術系統図

白黒の線画スタイルで、モノクロの技術系統図を作成してください。

ビジュアルスタイル

  • 白と黒のみを厳守
  • 色、グラデーション、影は使用しない
  • すっきりとした技術系/エンジニアリング系の図解の雰囲気
  • 多少の手描き/Excalidraw 風の趣を加えつつ、整然として読みやすくする
  • 細めから中程度の太さの黒い輪郭線を使用
  • 背景は白、またはごく薄い色にする
  • 視覚的な要素は最小限に抑える
  • アイコンや図形はシンプルにする
  • コントラストを高くする
  • 平面的な 2D 構成にする

レイアウト

  • 図を左から右への明確なシステムフローに沿って配置する
  • エンティティやコンポーネントには、ラベル付きの長方形のボックスを使用する
  • フロー、依存関係、またはやり取りを示す矢印でコンポーネントをつなぐ
  • 間隔を均等にし、読みやすくする
  • 技術アーキテクチャの概要図らしい構成にする
  • 必要に応じて、矢印に短いラベルを付ける

タイポグラフィ

  • 大文字のラベルを使用する
  • 可能であれば、太字で幅の狭い技術的な印象の文字にする
  • テキストは短く、読みやすく、図解に適したものにする
  • 装飾性より読みやすさを優先する

コンテンツのルール

  • 構造、関係性、フローに焦点を当てる
  • アイコン、チップ、サーバー、工場、ウェハー、矢印、シンプルな記号を優先する
  • フォトリアリズムは避ける
  • 光沢のある UI 要素は避ける
  • カラフルなインフォグラフィック風のスタイルは避ける
  • ポスターのようなマーケティング風のスタイルは避ける

出力目標

業界、サプライチェーン、ソフトウェア/ハードウェアのアーキテクチャを説明するのに適した、白黒のシステム系統図またはモノクロの技術解説図のように見える仕上がりにしてください。

制約事項

  • アクセントカラーは使用しない
  • 暗い背景の設計図は使用しない
  • 3D レンダリングは使用しない
  • リアルな陰影は付けない
  • 凝ったイラスト風のスタイルは避ける
  • コミック風のスタイルは避ける
  • 要素が雑然としたインフォグラフィック風の見た目は避ける

コメント