ascii-diagram-boxflow について
ascii-diagram-boxflowは、ASCIIテキストでボックスと矢印の図を作成するスキルです。スキル名が明示された場合に使い、付属スクリプトは単純な直線フローや1つの二分岐をベストエフォートで配置します。
主な機能
- 01ASCIIのみのボックスと矢印の図
- 02上下または左右の配置方向
- 03幅とボックス幅の設定
- 04ノード番号の任意付与
- 05複雑な図の分割案
活用シーン
- 01シンプルなログインフローの図示
- 02二分岐を含む処理の表示
- 0312ノードを超える図の分割
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ partme-ai/ full-stack-skills --skill ascii-diagram-boxflowインストール後、Claude Code で/ascii-diagram-boxflowを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.txtexamples/login-flow.mdscripts/boxflow.py詳細
このスキルを使用するタイミング
重要なトリガールール
- ユーザーがスキル名
ascii-diagram-boxflowを明示的に指定した場合にのみ、このスキルを使用してください。
トリガーとなるフレーズ:
- 「ascii-diagram-boxflow」
- 「ascii-diagram-boxflow を使って」
- 「用 ascii-diagram-boxflow 画 ASCII 流程图/框图」
- 「使用 ascii-diagram-boxflow 生成 box + 箭头连接图」
境界
- ASCII のみを出力してください。Mermaid/PlantUML は出力しないでください。
- ノード数は 12 以下を推奨します。それより多い場合は、サブ図に分割してください。
- 自動レイアウトは、直線的なフローや単純な分岐に対してベストエフォートで機能します。複雑なレイアウトには、順序の手動指定または分割が必要です。
このスキルの使用方法
入力
- nodes(ノードのリスト。名前は必須)
- edges(接続:from/to)
- direction(TB | LR、既定値は TB)
- width(既定値は 80)
- boxWidth(既定値は 16)
- numbering(既定値は false)
出力(必須)
- diagram(ASCII のみ)
- layoutRules(ボックス幅+矢印/線のルール)
- splitAdvice(複雑な図の分割方法)
スクリプト
scripts/boxflow.py:直線的なフローと単一の 2 方向分岐に対するベストエフォートのスクリプト
例
examples/login-flow.md
インラインの例
入力:nodes=[Login, Validate, Dashboard]、edges=[Login->Validate, Validate->Dashboard]、direction=TB:
+----------------+
| Login |
+----------------+
|
v
+----------------+
| Validate |
+----------------+
|
v
+----------------+
| Dashboard |
+----------------+
長い名前の切り詰め(boxWidth=16):「Authentication Service」は「Authenticati...」になります。
品質チェックリスト
- 矢印の方向が明確で、交差がないこと
- 行の幅が
<= widthで、末尾に空白がないこと - 長いノード名は、一貫した方法で切り詰めるか折り返すこと
キーワード
英語: ascii-diagram-boxflow, ASCII 図, フローチャート, ボックス, 矢印, プレーンテキスト, ターミナル 中文: ascii-diagram-boxflow, ASCII 框图, 流程图, 纯文本, 盒子, 箭头, 终端
コメント
Markdown 対応