skills.rest
davidarce
davidarceCOMMUNITY
Explore all skills by this author →
𝕏@_davidarceGitHub

arch-flow-explorer

Convert code paths into interactive HTML architecture diagrams.

1|Updated Mar 25, 2026
Search Tags:#architecture#documentation#interactive#visualization#flow#diagram
One-click install
npx skills add https://github.com/davidarce/devrune-starter-catalog --skill arch-flow-explorer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arch-flow-explorer
Source: https://github.com/davidarce/devrune-starter-catalog/tree/main/skills/arch-flow-explorer
Command: npx skills add https://github.com/davidarce/devrune-starter-catalog --skill arch-flow-explorer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architectural flows are hard to grasp from code alone; this skill turns them into clear, interactive diagrams that reveal components, data paths, and dependencies.

Core Features & Use Cases

  • Interactive node diagrams with clickable components and detail panels
  • Automatic layout and step-through walkthroughs for exploring architectures
  • Use cases include onboarding new engineers, architecture reviews, and debugging complex systems

Quick Start

Open the arch-flow-explorer and click any node to inspect its details.

Frequently Asked Questions about arch-flow-explorer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert code paths into interactive architecture diagrams?▼

You can convert code paths into interactive architecture diagrams by using a tool that parses repository references to derive components and connections, outputting a self-contained HTML diagram with an interactive viewer. It applies to onboarding, architecture reviews, and debugging across microservices and modules.

What is the best way to visualize microservices and module dependencies for onboarding?▼

Visualizing microservices and module dependencies for onboarding is best handled by generating interactive node diagrams with clickable components and detail panels. This approach reveals data paths and dependencies clearly, replacing the need to grasp complex architectural flows from code alone.

Can I generate a self-contained HTML viewer for architecture documentation without external dependencies?▼

Yes, you can generate a self-contained HTML viewer for architecture documentation without external dependencies. The process parses repository references to derive components and connections, outputting a standalone interactive diagram that includes step-through walkthroughs and automatic layout.

Does this approach to interactive flow visualization work for debugging complex systems?▼

Yes, this approach to interactive flow visualization works for debugging complex systems. By turning architectural flows into clear, interactive diagrams, it reveals components, data paths, and dependencies, making it easier to trace issues across microservices and modules during debugging.

How do I explore architecture flows when automatic layout is not enough?▼

To explore architecture flows when automatic layout is not enough, you can use an interactive viewer that provides step-through walkthroughs. This allows you to click individual nodes to inspect details and manually trace data paths and dependencies across the generated diagram.

Related Skills

Explore More Software Engineering Skills→
castrojocastrojo

architecture-diagram-specification

Generate JSON specifications for component, data flow, and deployment diagrams.

Community
Advanced
cbbkrd-techcbbkrd-tech

visual-explainer

Generate self-contained HTML pages with Mermaid.js diagrams and CSS.

Community
Advanced
shekerkammashekerkamma

workflow-visualizer

Convert plain text workflow descriptions into interactive HTML diagrams.

Community
Intermediate
ethan-rioethan-rio

html-architecture-diagrams

Generate self-contained HTML architecture diagrams with inline SVG visuals.

Community
Advanced