skills.rest
vanducng
vanducngCOMMUNITY
Explore all skills by this author →
Website𝕏@vanducngGitHub

diagram

Generate SVG or PNG diagrams from natural-language prompts with automatic type classification.

5|Updated May 2, 2026
Search Tags:#versioning#png#svg#openrouter#diagram#prompt-engineering#skeleton
One-click install
npx skills add https://github.com/vanducng/skills --skill diagram-vanducng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/vanducng/skills/tree/main/skills/diagram
Command: npx skills add https://github.com/vanducng/skills --skill diagram-vanducng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, PyYAML, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides an automated way to convert natural-language prompts into modern, reviewable diagrams (system architecture, data-flow, workflow, sequence, ER, state-machine, and C4 contexts/containers) using OpenRouter SVG/PNG rendering and a deterministic skeleton-paint workflow.

Core Features & Use Cases

  • Generate SVG or PNG diagrams from prompts, with automatic diagram-type classification and optional --type override.
  • Produce versioned artifacts under docs/diagrams for PR-ready diffs and documentation.
  • Support interactive or static outputs (SVG skeleton path or PNG render path) and attach operation instructions.

Quick Start

Describe a diagram you want to generate in natural language and run this skill to render it as an SVG or PNG diagram.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I generate system architecture diagrams from natural-language prompts?▼

Generate system architecture diagrams from natural-language prompts by using a skeleton-paint workflow that classifies the diagram type and renders SVG or PNG outputs. It supports architecture, data flows, workflows, sequences, ER diagrams, and state machines.

Can I generate versioned SVG or PNG diagrams for pull requests?▼

Yes, you can generate versioned SVG or PNG diagrams for pull requests. The tool stores artifacts under docs/diagrams with deterministic metadata, enabling PR-ready diffs and documentation alongside your codebase.

What diagram types are supported when converting text prompts to visual diagrams?▼

Converting text prompts to visual diagrams supports architecture, data flows, workflows, sequences, ER diagrams, state machines, and C4 contexts/containers. Automatic diagram-type classification determines the layout engine, with an optional type override.

Does diagram rendering require an OpenRouter API connection?▼

Yes, diagram rendering requires an OpenRouter connection to handle SVG and PNG generation via deterministic layout engines. The Python environment also needs requests and PyYAML dependencies installed to execute the rendering scripts.

What's the best way to create C4 context diagrams from text descriptions?▼

The best way to create C4 context diagrams from text descriptions is through an automated skeleton-paint workflow that classifies the prompt context and renders deterministic SVG or PNG output. Versioned artifacts are then saved under docs/diagrams.

Why are my generated workflow diagrams not updating in version control?▼

Generated workflow diagrams may not update correctly in version control if deterministic metadata is not applied or if artifacts are not saved under the docs/diagrams directory. Ensure the skeleton-paint workflow outputs versioned files for proper PR-ready diffs.

Related Skills

Explore More Software Engineering Skills→
duy-tungduy-tung

ck:tech-graph

Generate SVG+PNG technical diagrams from natural language descriptions.

Community
Advanced
cklxxcklxx
11

diagram-to-image

Render Mermaid diagrams and icon blocks into PNG or SVG images.

Community
Basic
Eric-NessEric-Ness

create-meta-prompts

Create XML-structured metadata prompts for Claude-to-Claude multi-stage workflows.

Community
Advanced
VictorSmaniottoVictorSmaniotto

diagram-generator

Generate Mermaid and PlantUML definitions for data models, workflows, and system architecture.

Community
Advanced