Agent Skills › n0an/VivaDicta › diagram

diagram

GitHub

根据代码库结构或用户请求，生成清晰的 ASCII 架构图、流程图或组件关系图。支持多种图表类型，注重可读性与对齐，并自动保存结果文件。

.agents/skills/diagram/SKILL.md n0an/VivaDicta

Trigger Scenarios

需要可视化系统架构分析代码库结构绘制数据流或组件交互关系

Install

npx skills add n0an/VivaDicta --skill diagram -g -y

More Options

Non-standard path

npx skills add https://github.com/n0an/VivaDicta/tree/main/.agents/skills/diagram -g -y

Use without installing

npx skills use n0an/VivaDicta@diagram

指定 Agent (Claude Code)

npx skills add n0an/VivaDicta --skill diagram -a claude-code -g -y

安装 repo 全部 skill

npx skills add n0an/VivaDicta --all -g -y

预览 repo 内 skill

npx skills add n0an/VivaDicta --list

SKILL.md

Frontmatter

{
    "name": "diagram",
    "description": "Create ASCII diagrams representing component architecture, data flow, or codebase structure",
    "disable-model-invocation": true
}

diagram

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:

Use ASCII box drawing characters for clean visuals
Include labels and arrows to show relationships
Keep diagrams readable and well-aligned
Add legend if needed for clarity
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