diagram

SkillDev tools

Create ASCII diagrams representing component architecture, data flow, or codebase structure

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the diagram skill

What this skill tells your AI

The instructions your AI receives, as published by n0an/vivadicta in .agents/skills/diagram/SKILL.md and read by ahel’s review.

You are given the following context: $ARGUMENTS

Instructions

Create a clear ASCII diagram representing the requested component, model, or codebase structure. The user wants to visualize architecture, relationships, or flow.

Guidelines:

  1. Use ASCII box drawing characters for clean visuals
  2. Include labels and arrows to show relationships
  3. Keep diagrams readable and well-aligned
  4. Add legend if needed for clarity
  5. Focus on the specific component/area requested

Diagram Types:

  • Architecture diagrams: Show layers, components, and their relationships
  • Flow diagrams: Illustrate data flow or process sequences
  • Class/Model diagrams: Display properties, methods, and relationships
  • Component diagrams: Show how modules interact
  • State diagrams: Represent state transitions

ASCII Characters to Use:

  • Boxes: ┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼
  • Arrows: → ← ↑ ↓ ↔ ⇒ ⇐
  • Connectors: + - | / \
  • Alternative boxes: +---+ style if Unicode isn't supported

Example Format:

┌─────────────┐
│  Component  │
└──────┬──────┘
       ↓
┌──────┴──────┐
│   Service   │
└─────────────┘

Analyze the codebase structure first, then create the most appropriate diagram type for what's being asked. Include a brief description of what the diagram represents.

Save resulting diagram and explanations in some file in the project

Signals

GitHub stars
112
Forks
10
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
diagram-n0an
Source
github.com/n0an/vivadicta