sutanunandigrami/dot-claude/skills/diagrams
dot-claude/skills/diagrams/SKILL.md
Generate architecture and flow diagrams using mermaid-cli (mmdc)
$ install --global
skillsauthnpx skillsauth add sutanunandigrami/claude-titan-setup dot-claude/skills/diagramsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 2:23 AM5.8s1 file scanned
SKILL.md
- description:
- Generate architecture and flow diagrams using mermaid-cli (mmdc)
- paths:
- **/*.md,**/docs/**,**/*.mermaid,**/*.diagram,**/*.drawio
Diagram Generation
Use mmdc (mermaid-cli) to render diagrams as PNG/SVG.
Usage
# Write mermaid to file, then render
cat > /tmp/diagram.mmd << 'EOF'
graph TD
A[Client] --> B[API Gateway]
B --> C[Auth Service]
B --> D[App Service]
D --> E[(Database)]
EOF
mmdc -i /tmp/diagram.mmd -o diagram.png # PNG output
mmdc -i /tmp/diagram.mmd -o diagram.svg # SVG output
mmdc -i /tmp/diagram.mmd -o diagram.png -w 1200 # custom width
mmdc -i /tmp/diagram.mmd -o diagram.pdf # PDF output
Diagram Types
Architecture / System Design
graph TD
LB[Load Balancer] --> S1[Server 1]
LB --> S2[Server 2]
S1 --> DB[(PostgreSQL)]
S2 --> DB
S1 --> Cache[(Redis)]
S2 --> Cache
Sequence Diagram
sequenceDiagram
Client->>API: POST /login
API->>Auth: validate(credentials)
Auth-->>API: token
API-->>Client: 200 OK {token}
Entity Relationship
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "ordered in"
Git Flow
gitgraph
commit
branch feature
commit
commit
checkout main
merge feature
commit
State Diagram
stateDiagram-v2
[*] --> Draft
Draft --> Review: submit
Review --> Approved: approve
Review --> Draft: request changes
Approved --> Deployed: deploy
Deployed --> [*]
Flowchart (CI/CD Pipeline)
graph LR
A[Push] --> B[Lint]
A --> C[Test]
B --> D{All Pass?}
C --> D
D -->|Yes| E[Build]
D -->|No| F[Notify]
E --> G[Deploy]
Workflow
- Write mermaid syntax to a
.mmdfile. - Render with
mmdc -i input.mmd -o output.png. - For docs, use SVG:
mmdc -i input.mmd -o output.svg. - Store diagrams in
docs/diagrams/or project root. - Reference in README:
.
Tips
- Use
graph TD(top-down) orgraph LR(left-right) for direction. - Keep diagrams focused — one concept per diagram.
- Use descriptive node IDs:
DB[(PostgreSQL)]notA[(DB)]. - For large systems, break into multiple diagrams.
Related Skills
sutanunandigrami/dot-claude/skills/workspace
tools
VerifiedTrustedCommunity
Project workspace configuration — auto-detect commands, _workspace.json convention, .envrc templates
9SKILL.mdUpdated Apr 15, 2026
sutanunandigrami/VibeSec-Skill
development
VerifiedTrustedCommunity
This skill helps Claude write secure web applications. Use this when working on any web application or when a user requests a scan or audit to ensure security best practices are followed.
9SKILL.mdUpdated Apr 15, 2026
sutanunandigrami/modern-python
tools
VerifiedTrustedCommunity
Configures Python projects with modern tooling (uv, ruff, ty). Use when creating projects, writing standalone scripts, or migrating from pip/Poetry/mypy/black.
9SKILL.mdUpdated Apr 15, 2026
sutanunandigrami/dot-claude/skills/tmux-control
tools
VerifiedTrustedCommunity
Control tmux sessions — create panes, run commands, read output, monitor processes
9SKILL.mdUpdated Apr 15, 2026