skills.rest
ivanov-i
ivanov-iCOMMUNITY
Explore all skills by this author →
GitHub

visual-generate-web-diagram

Generate self-contained HTML diagrams for architectures and workflows.

Updated Aug 12, 2018
Search Tags:#architecture#visualization#flowcharts#browser#diagram-generation#web-diagrams
One-click install
npx skills add https://github.com/ivanov-i/dots --skill visual-generate-web-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-generate-web-diagram
Source: https://github.com/ivanov-i/dots/tree/main/codex/skills/visual-generate-web-diagram
Command: npx skills add https://github.com/ivanov-i/dots --skill visual-generate-web-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate self-contained visual diagrams for architectures and workflows, rendered as browser-accessible HTML pages to replace ASCII diagrams and manual HTML creation.

Core Features & Use Cases

  • Generate architecture diagrams, flowcharts, schemas, timelines, and dashboards as self-contained HTML pages.
  • Open the created visualization directly in the browser for immediate sharing and review.
  • Use prompts and templates to translate textual requests into polished web diagrams.

Quick Start

Ask me to diagram your system, and I will generate a standalone web diagram and open it in your browser.

Frequently Asked Questions about visual-generate-web-diagram

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

FAQPage Schema
How do I generate an architecture diagram as a web page?▼

To generate an architecture diagram as a web page, you provide a textual prompt describing your system. The tool translates this request into a self-contained HTML file and opens the visual diagram directly in your browser.

Can I create flowcharts and timelines without manual HTML coding?▼

Yes, you can create flowcharts and timelines without manual HTML coding. The tool uses built-in templates to convert your textual request into a polished, standalone web visualization automatically.

What is the best way to visualize system workflows for browser sharing?▼

The best way to visualize system workflows for browser sharing is generating standalone HTML pages. This approach replaces ASCII diagrams by producing self-contained web files that are immediately viewable and shareable across browsers.

Where are generated web diagrams stored on my system?▼

Generated web diagrams are stored locally in the ~/.agent/diagrams/ directory. The deterministic workflow writes the HTML output to this folder before opening the final visual result in your default browser.

Do I need external libraries to render schemas and dashboards in the browser?▼

No, you do not need external libraries to render schemas and dashboards in the browser. The tool produces self-contained HTML pages, ensuring the technical visuals display correctly without additional dependencies.

Related Skills

Explore More Software Engineering Skills→
X-School-AcademyX-School-Academy
19

media-image-analysis

Analyze images with AI vision models to answer questions about content.

Official
Basic
shushuznshushuzn
4

markdown-mermaid-writing

Write Markdown documents with Mermaid diagrams and accessibility annotations.

Community
Advanced
VinedineVinedine
2

c4-document-system

Generates technical architecture documentation from Structurizr DSL definitions and source code repositories.

Community
Advanced
githubgithub
37.6k

plantuml-ascii

Convert PlantUML diagrams to ASCII art for terminal viewing.

Official
Advanced