💬 コミュニケーションコミュニティ

ascii-visualizer

システム構成や実装計画、ワークフロー、データ比較、ファイル構造などを、美しいASCIIアートで視覚的に表現し、説明やドキュメント作成を効果的に支援するSkill。

📜 元の英語説明(参考)

Creates beautiful ASCII art visualizations for plans, architectures, workflows, and data. This skill should be used when explaining system architecture, creating implementation plans, showing workflows, visualizing comparisons, or documenting file structures. NOT for code syntax highlighting or markdown tables. User explicitly loves ASCII art - use liberally for visual communication.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ascii-visualizer.zip https://jpskill.com/download/17238.zip && unzip -o ascii-visualizer.zip && rm ascii-visualizer.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17238.zip -OutFile "$d\ascii-visualizer.zip"; Expand-Archive "$d\ascii-visualizer.zip" -DestinationPath $d -Force; ri "$d\ascii-visualizer.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して ascii-visualizer.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → ascii-visualizer フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

ASCII Visualizer Skill

🎯 SKILL ACTIVATION PROTOCOL（スキル起動プロトコル） このスキルを使用するには、応答の開始時に以下のように宣言してください。

🎯 Using ascii-visualizer skill for visual diagram generation

目的

あらゆる概念について、明確な ASCII 可視化を作成します。USER は ASCII アートを非常に気に入っています - 積極的に使用してください！

使用する場面

アーキテクチャ図またはシステム設計
実装計画とワークフロー
ビフォー/アフターの比較またはオプション
進捗インジケーターとメトリクス
ファイルツリーと階層

パターンライブラリ

ボックス図

┌─────────────────┐
│  Component A    │
│  (Description)  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Component B    │
└─────────────────┘

ファイルツリー

test-orchestration-demo/
├── .claude/
│   ├── skills/           ⭐ This skill!
│   └── instructions/
├── Docs/
│   └── results-implementation/
└── frontend/             ✨ 7-folder architecture
    ├── app/              (Next.js routes)
    ├── modules/          (Feature modules)
    ├── shared/           (UI components)
    ├── lib/              (Integrations)
    ├── store/            (Global state)
    ├── styles/           (Design system)
    └── types/            (TypeScript)

フローチャート

User Answer
     │
     ▼
tRPC Endpoint
     │
     ▼
Claude AI → Evaluation
     │
     ▼
Results Store → UI

比較表

┌──────────────────────────────────────────┐
│    BEFORE (17 folders)  AFTER (7 folders)│
├──────────────────────────────────────────┤
│  Complexity: High      Simple     -60% ⬇️│
│  Type Safety: 70%      100%       +30% ✅│
│  Code Lines: 3,455     2,500     -955 🧹│
│  Build Time: 8.5s      7.2s      -15% ⚡│
└──────────────────────────────────────────┘

プログレスバー

DevPrep AI - Results Analytics
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tab 1: Overview      ████████████████ 100% ✅
Tab 2: Questions     ████████████████ 100% ✅
Tab 3: Hint Analytics████████████████ 100% ✅
Tab 4: Insights      ████████████████ 100% ✅
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

ボックス描画文字

┌─┬─┐  ╔═╦═╗  Basic boxes
├─┼─┤  ╠═╬═╣  Heavy boxes
└─┴─┘  ╚═╩═╝  Rounded corners

│ ║    Vertical lines
─ ═    Horizontal lines

▲ ▼    Arrows
► ◄    Arrows horizontal

✅ ❌  Status indicators
🚧 📋  Progress states
⭐ 🔥  Priorities

ベストプラクティス

明確さを最優先に - ASCII は混乱させるのではなく、明確にするものであるべきです。
一貫したスタイル - ボックス描画文字は一貫して使用してください。
コンパクトに - 可能であれば 80〜100 カラムに収めてください。
ステータスインジケーター - 視覚的な面白さのために絵文字を使用してください：✅ 🚧 📋 ⏳ ❌ ⭐
常に可視化を - ユーザーは計画を ASCII アートとして見ることを好みます。

使用ガイドライン

以下のものについて ASCII 可視化を作成してください。

「X はどのように機能しますか？」
「計画を見せてください」
「アーキテクチャは何ですか？」
「A と B を比較してください」
ビジュアルによって利点が得られるあらゆる説明

例

包括的な例については、examples/devprep-architecture.md を参照してください。以下を示しています。

DevPrep AI の 7 フォルダアーキテクチャ
Tab 4 Learning Insights の実装ワークフロー
並列実行によるエージェント委譲
データフローの可視化 (store → hooks → components)
最近の成果とメトリクス
スキルエコシステムの統合

この例は、高レベルのアーキテクチャから詳細な実装フローへと進む、階層化された可視化を作成する方法を示しています。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

ASCII Visualizer Skill

🎯 SKILL ACTIVATION PROTOCOL To use this skill, announce at the start of the response:

🎯 Using ascii-visualizer skill for visual diagram generation

Purpose

Create clear ASCII visualizations for ANY concept. USER EXPLICITLY LOVES ASCII ART - use liberally!

When to Use

Architecture diagrams or system design
Implementation plans and workflows
Before/after comparisons or options
Progress indicators and metrics
File trees and hierarchies

Pattern Library

Box Diagrams

┌─────────────────┐
│  Component A    │
│  (Description)  │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Component B    │
└─────────────────┘

File Trees

test-orchestration-demo/
├── .claude/
│   ├── skills/           ⭐ This skill!
│   └── instructions/
├── Docs/
│   └── results-implementation/
└── frontend/             ✨ 7-folder architecture
    ├── app/              (Next.js routes)
    ├── modules/          (Feature modules)
    ├── shared/           (UI components)
    ├── lib/              (Integrations)
    ├── store/            (Global state)
    ├── styles/           (Design system)
    └── types/            (TypeScript)

Flow Charts

User Answer
     │
     ▼
tRPC Endpoint
     │
     ▼
Claude AI → Evaluation
     │
     ▼
Results Store → UI

Comparison Tables

┌──────────────────────────────────────────┐
│    BEFORE (17 folders)  AFTER (7 folders)│
├──────────────────────────────────────────┤
│  Complexity: High      Simple     -60% ⬇️│
│  Type Safety: 70%      100%       +30% ✅│
│  Code Lines: 3,455     2,500     -955 🧹│
│  Build Time: 8.5s      7.2s      -15% ⚡│
└──────────────────────────────────────────┘

Progress Bars

DevPrep AI - Results Analytics
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Tab 1: Overview      ████████████████ 100% ✅
Tab 2: Questions     ████████████████ 100% ✅
Tab 3: Hint Analytics████████████████ 100% ✅
Tab 4: Insights      ████████████████ 100% ✅
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Box-Drawing Characters

┌─┬─┐  ╔═╦═╗  Basic boxes
├─┼─┤  ╠═╬═╣  Heavy boxes
└─┴─┘  ╚═╩═╝  Rounded corners

│ ║    Vertical lines
─ ═    Horizontal lines

▲ ▼    Arrows
► ◄    Arrows horizontal

✅ ❌  Status indicators
🚧 📋  Progress states
⭐ 🔥  Priorities

Best Practices

Clarity First - ASCII should clarify, not confuse
Consistent Styling - Use box-drawing characters consistently
Compact - Fit within 80-100 columns when possible
Status Indicators - Use emojis for visual interest: ✅ 🚧 📋 ⏳ ❌ ⭐
Always Visualize - User loves seeing plans as ASCII art

Usage Guidelines

Create ASCII visualizations for:

"How does X work?"
"Show me the plan"
"What's the architecture?"
"Compare A vs B"
ANY explanation that benefits from visuals

Example

See examples/devprep-architecture.md for a comprehensive example showing:

DevPrep AI's 7-folder architecture
Tab 4 Learning Insights implementation workflow
Agent delegation with parallel execution
Data flow visualization (store → hooks → components)
Recent accomplishments and metrics
Skills ecosystem integration

This example demonstrates how to create layered visualizations that progress from high-level architecture to detailed implementation flows.