skills.rest
Nhqvu2005
Nhqvu2005COMMUNITY
Explore all skills by this author →
GitHub

system-diagrammer

Generate C4 context and sequence diagrams using Mermaid.js syntax.

54|21|Updated Feb 12, 2026
Search Tags:#architecture#documentation#diagrams#sequence diagram#c4#mermaid.js
One-click install
npx skills add https://github.com/Nhqvu2005/VibeGravityKit --skill system-diagrammer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: system-diagrammer
Source: https://github.com/Nhqvu2005/VibeGravityKit/tree/main/VibeGravityKit/.agent/skills/system-diagrammer
Command: npx skills add https://github.com/Nhqvu2005/VibeGravityKit --skill system-diagrammer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mermaid.js, and includes scripts (resource) and data (resource) components.

What problem does it solve?

This Skill automates the creation of system architecture diagrams, making it easier to visualize and communicate complex system designs.

Core Features & Use Cases

  • C4 Diagrams: Generate high-level context diagrams to show how a system fits into its environment.
  • Sequence Diagrams: Visualize the flow of interactions between different components or actors over time.
  • Use Case: Quickly generate a C4 context diagram for a new project proposal or a sequence diagram illustrating a critical user authentication flow.

Quick Start

Generate a C4 context diagram for an e-commerce system with nodes User, Web App, API Gateway, Order Service, and Database.

Frequently Asked Questions about system-diagrammer

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

FAQPage Schema
How do I generate system architecture diagrams for technical documentation?▼

To generate system architecture diagrams, you provide the diagram type, title, and node or step definitions. This Skill processes them via Python scripts to output Mermaid.js syntax for technical documentation and planning.

What is a C4 context diagram and when do I need one for my project?▼

A C4 context diagram visualizes how a system fits into its environment at a high level. You need one to communicate complex system designs, such as mapping an e-commerce flow with Users, Web Apps, and APIs.

Can I use Mermaid.js to create sequence diagrams for user authentication flows?▼

Yes, Mermaid.js can render sequence diagrams to visualize interactions between components over time. This Skill automates generating these diagrams for critical flows like user authentication.

Do I need Python to run the system-diagrammer Skill?▼

Yes, Python is required. This Skill relies on Python scripts to process your diagram type, title, and node definitions into the final Mermaid.js syntax output.

What is the best way to visualize interaction flows between system components?▼

Generating sequence diagrams with Mermaid.js is an effective way to visualize interaction flows. This Skill automates the process, requiring only your step definitions to map component interactions over time.

Related Skills

Explore More Software Engineering Skills→
alexandereiseghohialexandereiseghohi

plantuml-ascii

Convert PlantUML definitions into ASCII art diagrams via command-line tools.

Community
Basic
Thanh-aperoThanh-apero
1

mermaidjs-v11

Creates and renders Mermaid.js v11 diagrams from markdown to SVG, PNG, PDF via CLI.

Community
Intermediate
viktorbezdekviktorbezdek
10

visual-communication

Generate Mermaid and C4 diagram code from textual system descriptions.

Community
Intermediate
VSF-QC-TTSVSF-QC-TTS

common-architecture-diagramming

Standardize architecture diagrams using C4 and UML models with Mermaid syntax.

Official
Intermediate