peach-gen-diagram

Diagram generation skill

Purpose

Read the user's description, documents, and code structure, propose a diagram format suited to the purpose, and then generate the actual diagram.

This skill is used for general-purpose visualization, not ERD.

• Workflow
• System/module structure
• Session flow
• Agent collaboration structure
• Document/knowledge management structure
• User journey
• Deployment/operations flow

Core principles

• First identify the purpose and audience.
• If the format is not clear, show example formats and let the user choose.
• If the user wants quick results, the AI picks the most suitable format, briefly states the reason for the choice, and draws it right away.
• Requests without a specified format are selected automatically according to the purpose. If the purpose is conditional branching, merging, hierarchical structure, architecture, state flow, or rendered documentation, Mermaidis preferred.
• For simple CLI procedures, short usage flows, and guidance where the readability of the original text matters, Unicodeis used.
• If the user specifies a particular format such as Mermaid, D2, PNG/SVG rendering, sequenceDiagram, or C4, prioritize that format and do not separately propose box-drawing as a candidate.
• If complex relationships, GitHub rendering, long-term maintenance, or file output are essential, consider Mermaid or D2 first.
• Exclude pure ASCII from the default candidates. Use it only if the user explicitly specifies it or an environment where Unicode characters break has been confirmed.
• DB table relationships are within the scope of peach-erd , so do not arbitrarily replace the ERD workflow in this skill.

Format selection guide

Format	Suitable case	Deliverable
Mermaid flowchart	Conditional branching, merging, business flow, system flow, hierarchical structure, architecture overview, hook/command pipeline	.mmd, Markdown Mermaid
Mermaid sequenceDiagram	Call order between actors, API request/response, agent collaboration order	.mmd, Markdown Mermaid
Mermaid stateDiagram	State transitions, approval/verification steps, task lifecycle	.mmd, Markdown Mermaid
Mermaid mindmap	Concept classification, feature list, document table of contents	.mmd, Markdown Mermaid
Unicode box-drawing	Short procedures, simple list-style flows, guidance read verbatim without rendering in a README. When a terminal-style expression is needed	Markdown text code block
D2	Architecture/service relationship diagrams where aesthetics matter, SVG output for presentations and documents	.d2, SVG/PNG
C4 style	When showing system boundaries, containers, and module responsibilities	Choose among Mermaid/D2/Structurizr

Workflow

Step 1: Identify input

Check which of the following was received.

• Natural language description
• Image/sketch description
• Document path
• Code/directory structure
• Existing Mermaid/ASCII draft

If it is a request based on files or code, first read the relevant files to secure evidence. qmdis installed and the target project guidelines contain an index name, first locate it using that index.

Step 2: Format suggestion or automatic selection

If the user has not specified a format and a choice is needed, suggest as follows. For conditional branching, merging, and hierarchical structures, Mermaid is the default recommendation; for short procedures or when source readability is key, Unicode is recommended.

다이어그램 형식 후보입니다.

1. Mermaid flowchart
   - 장점: 흐름과 분기를 깔끔하게 렌더링 가능, SVG/PNG 저장 가능
   - 단점: 렌더러 문법에 민감하므로 라벨 작성 규칙을 지켜야 함

2. Unicode box-drawing
   - 장점: Markdown/위키 원문에서 바로 읽기 좋고 렌더링 도구가 필요 없음
   - 단점: 복잡한 관계나 자동 렌더링에는 약함. 한글 박스 정렬은 폰트/렌더러마다 흔들릴 수 있음

3. D2
   - 장점: 아키텍처/서비스 관계도를 더 현대적인 시각 품질로 렌더링하기 좋음
   - 단점: Mermaid보다 기본 지원 생태계가 좁음

제 판단으로는 [추천 형식]이 가장 적합합니다. 이유: [짧은 이유]
선택해주시면 그 형식으로 그리겠습니다. 바로 진행해도 되면 추천 형식으로 작성하겠습니다.

If the user says "just decide", "recommend one", or "just draw it", proceed without asking a selection question.

Step 3: Diagram creation

Unicode box-drawing

Follow the rules below.

• text Provide it as a code block.
• Place a title box at the top.
• Main nodes are ┌─┐, │, └─┘ represent as a rectangle box based on
• When representing main nodes as rectangular boxes, write labels briefly, and do not put long sentences mixing Korean/English.
• Because box-type diagrams containing Korean may have their display width vary depending on the renderer/font, check the display state in the final document.
• For flow direction, │, ▼, ├, └ Use characters that match well with box-drawing, such as
• Place supplementary explanations as short bullets below the diagram.

Example:

┌──────────────────────────────────────────────┐
│                CLAUDE SESSION                │
└──────────────────────────────────────────────┘

┌────────────────────┐
│ SessionStart hook  │
│ cat wiki/hot.md    │
└─────────┬──────────┘
          ▼
┌────────────────────┐
│ prior context      │
│ injected           │
└─────────┬──────────┘
          ▼
┌──────────────────────────────────────────────┐
│       conversation + slash commands          │
└───────┬──────────────┬──────────────┬────────┘
        ▼              ▼              ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ wiki-ingest  │ │ save [slug]  │ │ autoresearch │
└──────┬───────┘ └──────┬───────┘ └──────┬───────┘
       └────────────────┴────────────────┘
                        ▼
                ┌──────────────┐
                │ git commit   │
                │ + push       │
                └──────┬───────┘
                       ▼
                ┌──────────────┐
                │ Stop hook    │
                │ update hot   │
                └──────────────┘

Mermaid

By default, provide as a Markdown Mermaid code block.

flowchart TD
    A[SessionStart hook] --> B[prior context injected]
    B --> C[conversation + slash commands]
    C --> D[/wiki-ingest]
    C --> E[/save slug]
    C --> F[/autoresearch x]
    D --> G[git commit + push]
    E --> G
    F --> G
    G --> H[Stop hook updates wiki/hot.md]

Mermaid authoring rules:

• Write node labels briefly.
• Separate complex explanations into explanations outside the node.
• Korean labels may be used, but if there are many special characters, wrap them in quotes.
• Parentheses, colons, and slashes that may cause rendering errors should be wrapped as label strings when necessary.
• /peach-* Slash commands such as must be Skill["/peach-team-dev"]written as a quoted label like . Skill[/peach-team-dev] The form may cause parsing errors in the renderer.
• Conditional branching and merging are often more readable in Mermaid than in Unicode, so even for documentation workflows, prioritize Mermaid if branching is central.

Step 4: Determine whether to save

If the user requests file saving, suggest a default path.

Deliverables	Default path
Mermaid source	docs/diagrams/{slug}.mmd
Unicode box-drawing diagram	docs/diagrams/{slug}.md
D2 source	docs/diagrams/{slug}.d2
Markdown insertion document	Inside the requested document
PNG/SVG rendering	docs/diagrams/{slug}.png, docs/diagrams/{slug}.svg

If a save path is specified, prioritize the user's path.

Step 5: Mermaid rendering

If you saved a Mermaid file and the user wants PNG/SVG saving or preview, use the CLI.

npx @mermaid-js/mermaid-cli@latest \
  -i docs/diagrams/{slug}.mmd \
  -o docs/diagrams/{slug}.png \
  -s 2

npx @mermaid-js/mermaid-cli@latest \
  -i docs/diagrams/{slug}.mmd \
  -o docs/diagrams/{slug}.svg

If rendering fails, fix the Mermaid syntax and retry once.

Step 6: Verification

Before completion, check the following.

• Does the format fit the user's purpose?
• In requests without a specified format, was Mermaid/Unicode/D2 selected according to the purpose?
• In automatic-selection requests, does the selected format fit the purpose, audience, and storage/rendering requirements?
• Is Mermaid unlikely to have syntax errors?
• Mermaid에 /peach-* If there is a slash command, was a quoted label used?
• If Korean is included in a Unicode box style, was the risk of display-width instability checked?
• If there was a save request, was the actual file created?
• If there was a rendering request, was the PNG/SVG generation result checked?

Response format

When only generation is requested:

추천 형식: [형식]
이유: [한 문장]

[다이어그램]

If the user specifies a format, omit the recommended format/candidate list and write directly in that format.

If a file was also created:

생성 완료:
- 소스: docs/diagrams/{slug}.mmd
- 렌더링: docs/diagrams/{slug}.png, docs/diagrams/{slug}.svg

검증:
- Mermaid CLI 렌더링 성공