skills.rest
nshonda
nshondaCOMMUNITY
Explore all skills by this author →
GitHub

interactive-plan

Generate a self-contained HTML architecture plan with Mermaid diagrams.

Updated Aug 23, 2026
Search Tags:#planning#architecture#html#mermaid#adr#diagram
One-click install
npx skills add https://github.com/nshonda/workstation-setup --skill interactive-plan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interactive-plan
Source: https://github.com/nshonda/workstation-setup/tree/main/claude/skills/interactive-plan
Command: npx skills add https://github.com/nshonda/workstation-setup --skill interactive-plan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generates self-contained architecture documentation with editable diagrams, phase tracking, and decision cards to keep architecture knowledge synchronized across teams.

Core Features & Use Cases

  • Self-contained HTML plans: Produce a single portable HTML file with Mermaid diagrams, phase tracking, and ADR-style decisions.
  • Inline review & ADRs: Capture architecture decisions with context, implications, and change history in collapsible cards.
  • Offline-first & CDN-backed: Works offline and can load Mermaid from CDN for distribution without dependencies.

Quick Start

Open the generated HTML file to explore mermaid diagrams, phase tracking, and the ADR-style decision cards.

Frequently Asked Questions about interactive-plan

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

FAQPage Schema
How do I generate interactive architecture diagrams for software planning?▼

You can generate interactive architecture diagrams by creating a self-contained HTML file with Mermaid diagrams, phase tracking, and ADR-style decisions for software planning and review.

What is the best way to document architecture decisions alongside diagrams?▼

Documenting architecture decisions alongside diagrams is best done using ADR-style decision cards that capture context, implications, and change history within a single portable HTML architecture plan.

Can I create offline architecture documentation with Mermaid diagrams?▼

Yes, you can create offline architecture documentation with Mermaid diagrams by generating a self-contained HTML file that works offline and optionally loads the Mermaid runtime from a CDN for distribution.

How do I track project phases in an HTML architecture plan?▼

You track project phases in an HTML architecture plan by using built-in phase tracking components that structure your architecture documentation and review workflow within a single portable file.

Do I need external dependencies to view my HTML architecture plan?▼

No external dependencies are required to view your HTML architecture plan because it is a self-contained file, utilizing a CDN-based Mermaid runtime for diagrams without needing local installations.

What is an ADR-style decision card in architecture documentation?▼

An ADR-style decision card in architecture documentation captures architecture decisions with context, implications, and change history in collapsible cards directly within your portable HTML plan.

Related Skills

Explore More Software Engineering Skills→
SSiertsemaSSiertsema

class-module-diagramming

Generate Mermaid class diagrams with visibility and relationship annotations.

Community
Advanced
CeeKay1901CeeKay1901

tool-teilen

Package an internal tool as a standalone HTML file with usage notes.

Community
Basic
mkurmanmkurman
321

markdown-mermaid-writing

Embed Mermaid diagrams in Markdown following style guides and templates.

Community
Advanced
OpenSenseNovaOpenSenseNova
4.9k

sn-md-to-html-report

Convert Markdown research documents into styled HTML reports with embedded images and Mermaid diagrams.

Official
Intermediate