skills.rest
flight505
flight505COMMUNITY
Explore all skills by this author →
WebsiteGitHub

project-diagrams

Generate architecture diagrams from natural language prompts using Nano Banana Pro AI or Mermaid.

4|Updated Jan 6, 2026
Search Tags:#Mermaid#OpenRouter#system-design#C4#architecture-diagrams#diagram-generation#Nano Banana Pro
One-click install
npx skills add https://github.com/flight505/claude-project-planner --skill project-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-diagrams
Source: https://github.com/flight505/claude-project-planner/tree/main/project_planner/.claude/skills/project-diagrams
Command: npx skills add https://github.com/flight505/claude-project-planner --skill project-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, python-dotenv, and includes scripts (resource) components.

What problem does it solve?

Creating clear, publication-quality architecture diagrams from textual descriptions is time-consuming and error-prone. This skill automates diagram generation using AI, ensuring professional visuals with consistent styling for PRDs, architecture reviews, and proposals.

Core Features & Use Cases

  • AI-based diagram generation: Produce publication-ready images from natural-language prompts using Nano Banana Pro AI.
  • Mermaid-based diagrams: Generate editable diagrams (SVG/PNG) and embed them in code/docs for version control.
  • Wide diagram support: System architecture, C4 context/container, data-flow, and sequence diagrams for project planning.
  • Use Case: Quickly generate architecture visuals for a sprint plan or design review without manual drawing.

Quick Start

Use the skill to generate a diagram by describing your system and selecting the output format. Example: python .claude/skills/project-diagrams/scripts/generate_schematic.py "Microservices architecture with API gateway and auth" -o diagrams/arch.png --doc-type architecture

Frequently Asked Questions about project-diagrams

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

FAQPage Schema
How do I generate architecture diagrams from natural language for documentation?▼

You can generate architecture diagrams from natural language by providing a text prompt describing your system to the generation script, which outputs publication-ready PNG or SVG visuals for project planning and documentation.

Can I create C4 and sequence diagrams using Mermaid from text prompts?▼

Yes, you can create C4 context, container, sequence, and data flow diagrams using Mermaid-based rendering from text prompts, outputting editable SVG or PNG files that embed easily in version-controlled code and docs.

Do I need an OpenRouter API key to generate system architecture diagrams?▼

Yes, an OpenRouter API key is required as a prerequisite to orchestrate AI-based diagram generation using Nano Banana Pro, which automates the creation of publication-quality architecture visuals.

What is the best way to automate diagram generation for a sprint plan or design review?▼

Automating diagram generation for a sprint plan involves running the generation script with a natural language prompt and specifying the document type, resulting in consistent, professional visuals without manual drawing.

Does this diagram generation approach support exporting SVG files for version control?▼

Yes, the Mermaid-based diagram generation supports exporting SVG files, allowing you to embed editable vector graphics directly into code repositories and documentation for version control tracking.

What are the limitations of using AI to generate publication-ready diagrams?▼

AI-based diagram generation requires an active OpenRouter API key and depends on external requests, meaning you need network access and valid credentials to produce publication-ready architecture or data flow visuals.

Related Skills

Explore More Software Engineering Skills→
seedprodseedprod
93

nano-banana-pro

Generate and edit images using the Gemini 3 Pro Image API.

Community
Intermediate
desafindesafin

moai-library-mermaid

Generate Mermaid diagrams and render SVG and PNG outputs via MCP Playwright.

Community
Advanced
majesticlabs-devmajesticlabs-dev
47

mermaid-builder

Generate syntactically valid Mermaid diagrams for flowcharts, sequence, class, state, Gantt, ER, and data lineage.

Official
Advanced
vuminhieuvuminhieu

mermaidjs-v11

Render Mermaid.js v11 diagrams to SVG, PNG, or PDF via CLI.

Community
Intermediate