Run any Skill in Manus with one click

archflow-diagram

Stars1

Forks0

UpdatedMay 22, 2026 at 19:23

Generates ONLY the animated HTML architecture diagram for a codebase (no surrounding report, no slide deck) — a single self-contained file with zero external dependencies that opens directly in any browser. Use when the user says: "just the diagram", "diagram only", "animated diagram only", "generate an architecture diagram (no report)", "show me the data flow animation", "I only want the diagram", or "self-contained diagram". Do NOT use for: full architecture reports (use the `archflow` skill), slide decks (use `archflow-slides`), static dependency graphs, or editing source code.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

rafaelolsr

rafaelolsr/copilot-collection

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

name	archflow-diagram
description	Generates ONLY the animated HTML architecture diagram for a codebase (no surrounding report, no slide deck) — a single self-contained file with zero external dependencies that opens directly in any browser. Use when the user says: "just the diagram", "diagram only", "animated diagram only", "generate an architecture diagram (no report)", "show me the data flow animation", "I only want the diagram", or "self-contained diagram". Do NOT use for: full architecture reports (use the `archflow` skill), slide decks (use `archflow-slides`), static dependency graphs, or editing source code.
license	MIT

Archflow — diagram-only mode

This is a thin dispatcher skill. It exists to route the user's diagram-only intent to the main archflow workflow with the mode locked to DIAGRAM.

Workflow

Read the sibling skill ../archflow/SKILL.md and execute its 7-stage pipeline (ANALYZE → PLAN → BUILD → DELIVER → REVIEW → FIX → PRESENT) end-to-end.
Force the mode to DIAGRAM for every stage. Ignore the "REPORT MODE" and "SLIDE MODE" branches.
Honor every constraint from the main skill's DIAGRAM-ONLY rules:
- Output file: ./architecture-diagram.html
- Fully self-contained — zero external dependencies
- Self-contained fonts only: 'JetBrains Mono', 'Fira Code', monospace
- No Google Fonts CDN, no Mermaid CDN
- Reference layout examples in ../archflow/assets/templates/ (horizontal-pipeline.html, multi-agent-hub.html, medallion-pipeline.html) — patterns, not rigid templates
Use the same reference docs as the main skill — they live in ../archflow/references/. Read them on demand:
- analysis.md, layouts.md in STAGE 1
- design-system.md, libraries.md, design-qa.md, animation.md in STAGE 2
- svg-exemplar.md in STAGE 3 as needed
- reviewer-agent.md in STAGE 5
Skip report-only references (report-sections.md, navigation.md) and slide-only references (slide-patterns.md).

Output contract

A single ./architecture-diagram.html file in the current working directory. After writing, print the absolute path so the user can open it in a browser.

Maintenance note

This shim contains no workflow logic. All pipeline, design heuristics, animation, and review rules live in ../archflow/. To update the diagram workflow, edit the main archflow skill — never copy logic into this file.

Analyzes a codebase and generates animated HTML architecture reports — beautiful, bespoke visualizations with interactive animated diagrams showing how the system works. Three output modes: full report (default), diagram-only (zero external deps), or scroll-snap slide deck. Use when the user says: "visualize the codebase", "explain the architecture", "generate a diagram", "show how the code flows", "create an architecture diagram", "animate the data flow", "explain this repo visually", "show me how this works", or "generate an architecture report". Do NOT use for: editing source code, generating documentation prose (use a regular doc), or producing static dependency graphs (this skill shows one typical request flow end-to-end, not the full graph).

2026-05-221

archflow-slides

rafaelolsr/copilot-collection

Generates an architecture slide deck for a codebase — a scroll-snap HTML presentation with the animated architecture diagram as a hero slide, plus supporting slides for components, data flow, external services, and insights. Navigate with arrow keys, Page Up/Down, or swipe gestures. Use when the user says: "create a slide deck", "architecture slides", "presentation of the architecture", "scroll-snap presentation", "make slides explaining this codebase", "deck for the architecture", or "slide-style architecture overview". Do NOT use for: full architecture reports (use the `archflow` skill), diagram-only output (use `archflow-diagram`), static dependency graphs, or editing source code.

2026-05-221

adr-write

rafaelolsr/copilot-collection

Authors an Architectural Decision Record (ADR) for a technical decision. Walks through context, considered options, decision, consequences, and references in a numbered, immutable record. Output goes to docs/adr/ (configurable). Forces explicit tradeoff analysis and "what would change this decision" criteria. Use when the user says: "write an ADR for this", "document this decision", "we chose X over Y, capture it", "ADR for the database switch", "record why we picked Lakehouse". Do NOT use for: brainstorming options (use ultrathink instead), documenting code patterns (use a regular doc), recording per-PR rationale (use the PR description).

2026-05-071

agentic-eval

rafaelolsr/copilot-collection

Adds evaluation capability to an existing agent or pipeline. Walks through designing the eval suite (deterministic + AI-assisted + agentic metrics), building the golden dataset, wiring the runner, and setting up regression tracking. Specific to the eval-framework patterns used in this collection (pytest markers, Fabric Delta backend, Azure AI Evaluation SDK). Use when the user says: "add evals to this agent", "design an eval suite for X", "how do I evaluate this prompt change?", "set up regression tracking for the agent", "I need golden data for this". Do NOT use for: writing the agent's prompts (different skill), training a model (out of scope), running existing evals (just `pytest -m eval`).

2026-05-071

code-review

rafaelolsr/copilot-collection

Systematic review of a pull request or diff. Walks 8 categories (security, correctness, error handling, types, performance, testing, observability, maintainability) in order of severity. Outputs structured findings with severity, location, and remediation pointer. Designed to be applied consistently across reviewers — same rubric every time. Use when the user says: "review this PR", "review my changes", "code review", "audit this diff", "what's wrong with this PR?", "check before merge". Do NOT use for: simplification only (use simplify skill), security-focused audit (deeper scope), performance-focused profiling, or pure architectural review.

2026-05-071

explore

rafaelolsr/copilot-collection

Explores an unfamiliar codebase to build a mental model: identifies entry points, primary modules, build / test commands, dependencies, data flow, and conventions. Outputs a structured "codebase map" document. Designed for onboarding to a new repo, evaluating a fork before contributing, or auditing a repo before adopting it. Use when the user says: "explore this codebase", "I just cloned this repo, give me the overview", "what does this project do?", "onboard me to this code", "summarize the architecture", "is this fork still maintained?". Do NOT use for: writing code (this skill is read-only), reviewing changes (use code-review), or planning a feature in code you already understand.

2026-05-071

name	archflow-diagram
description	Generates ONLY the animated HTML architecture diagram for a codebase (no surrounding report, no slide deck) — a single self-contained file with zero external dependencies that opens directly in any browser. Use when the user says: "just the diagram", "diagram only", "animated diagram only", "generate an architecture diagram (no report)", "show me the data flow animation", "I only want the diagram", or "self-contained diagram". Do NOT use for: full architecture reports (use the `archflow` skill), slide decks (use `archflow-slides`), static dependency graphs, or editing source code.
license	MIT

Archflow — diagram-only mode

This is a thin dispatcher skill. It exists to route the user's diagram-only intent to the main archflow workflow with the mode locked to DIAGRAM.

Workflow

Read the sibling skill ../archflow/SKILL.md and execute its 7-stage pipeline (ANALYZE → PLAN → BUILD → DELIVER → REVIEW → FIX → PRESENT) end-to-end.
Force the mode to DIAGRAM for every stage. Ignore the "REPORT MODE" and "SLIDE MODE" branches.
Honor every constraint from the main skill's DIAGRAM-ONLY rules:
- Output file: ./architecture-diagram.html
- Fully self-contained — zero external dependencies
- Self-contained fonts only: 'JetBrains Mono', 'Fira Code', monospace
- No Google Fonts CDN, no Mermaid CDN
- Reference layout examples in ../archflow/assets/templates/ (horizontal-pipeline.html, multi-agent-hub.html, medallion-pipeline.html) — patterns, not rigid templates
Use the same reference docs as the main skill — they live in ../archflow/references/. Read them on demand:
- analysis.md, layouts.md in STAGE 1
- design-system.md, libraries.md, design-qa.md, animation.md in STAGE 2
- svg-exemplar.md in STAGE 3 as needed
- reviewer-agent.md in STAGE 5
Skip report-only references (report-sections.md, navigation.md) and slide-only references (slide-patterns.md).

Output contract

A single ./architecture-diagram.html file in the current working directory. After writing, print the absolute path so the user can open it in a browser.

archflow-diagram

Archflow — diagram-only mode

Workflow

Output contract

Maintenance note

See also

Archflow — diagram-only mode

Workflow

Output contract

Maintenance note

See also

archflow-diagram

Archflow — diagram-only mode

Workflow

Output contract

Maintenance note

See also

More from this repository

More from this repository

Archflow — diagram-only mode

Workflow

Output contract

Maintenance note

See also