mcpField
A
ascii-diagram-boxflow

ascii-diagram-boxflow

github.com/full-stack-skillsデザイン・UI581 回インストール4 週間前に更新
リポジトリ

ascii-diagram-boxflow について

ascii-diagram-boxflowは、スキル名が明示された場合にのみ使うASCIIボックス図の生成スキルです。ノードと接続を入力として受け取り、配置ルールと複雑な図の分割案を示します。

主な機能

  1. 01ASCIIのみの図を出力
  2. 02上下または左右の配置
  3. 03幅とボックスサイズの指定
  4. 04複雑な図の分割案

活用シーン

  1. 01単純な直線フローの作図
  2. 02単一分岐を含むフローの表示
  3. 03複雑なフローのサブ図への分割

インストール

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

$npx skills add https://github.com/full-stack-skills/ascii-skills --skill ascii-diagram-boxflow

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
agents/
openai.yaml
examples/
login-flow.md
scripts/
boxflow.py

詳細

このスキルを使用するタイミング

重要なトリガールール

  • ユーザーがスキル名 ascii-diagram-boxflow を明示的に指定した場合にのみ、このスキルを使用してください。

トリガーフレーズの例:

  • "ascii-diagram-boxflow"
  • "use 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

品質チェックリスト

  1. 矢印の方向が明確で、交差を避けていること
  2. 行の幅が <= width で、末尾にスペースがないこと
  3. 長いノード名は、一貫した方法で切り詰めるか折り返すこと

キーワード

英語: ascii-diagram-boxflow、ASCII 図、フローチャート、ボックス、矢印、プレーンテキスト、ターミナル 中国語: ascii-diagram-boxflow、ASCII ボックス図、フローチャート、プレーンテキスト、ボックス、矢印、ターミナル

よくある落とし穴

  1. バージョンの互換性:フレームワークのバージョンと依存ライブラリの互換性に注意してください。バージョンによって API が異なる場合があります。
  2. 設定ファイルの形式:設定ファイルの形式の誤りは最もよくある問題です。エディターの構文チェックを使用することをおすすめします。
  3. 環境変数:必要な環境変数がすべて正しく設定されていることを確認し、機密情報をハードコードしないでください。
  4. 依存関係の競合:複数のバージョンを共存させる場合は依存関係の競合に注意し、lock ファイルを使用してバージョンを固定してください。
  5. パフォーマンスの落とし穴:大量のデータを扱う場合はパフォーマンスの最適化に注意し、N+1 クエリなどのよくある問題を避けてください。

使用手順

Step 1: 環境の準備

開発環境に必要な依存関係とツールがインストールされていることを確認します。

Step 2: 初期設定

プロジェクトの要件に応じて基本設定を行います。

Step 3: コア機能の使用

サンプルコードに従ってコア機能を実装します。

Step 4: テストと検証

テストを実行して、機能が正常に動作することを確認します。

Step 5: デプロイ

開発が完了したら、デプロイと監視を行います。

コメント