generating-mermaid-diagrams
Salesforce architecture diagram generation using Mermaid syntax with ASCII fallback
Overview
generating-mermaid-diagrams is a Salesforce architecture diagram skill that generates professional diagrams using Mermaid syntax with ASCII art fallback for terminal compatibility.
Features
- OAuth Flows - Authorization Code, PKCE, JWT Bearer, Client Credentials, Device Flow
- Data Models - ERD diagrams with generating-custom-object integration
- Integrations - Sequence diagrams for API patterns
- Architecture - System landscape overviews
- Role Hierarchies - Security model visualization
- Agentforce - Agent topic and action flows
- Accessible - Color-blind friendly palette
- Terminal Friendly - ASCII fallback for all diagrams
Quick Start
# Generate an OAuth diagram
"Create a JWT Bearer OAuth flow diagram"
# Generate a data model
"Create an ERD for Account, Contact, and Opportunity"
# Generate an integration diagram
"Diagram our Salesforce to SAP sync flow"
Diagram Types
| Type |
Template |
Use Case |
| Authorization Code |
oauth/authorization-code.md |
Web apps with backends |
| PKCE Flow |
oauth/authorization-code-pkce.md |
Mobile/SPA apps |
| JWT Bearer |
oauth/jwt-bearer.md |
Server-to-server, CI/CD |
| Client Credentials |
oauth/client-credentials.md |
Service accounts |
| Device Flow |
oauth/device-authorization.md |
CLI tools, IoT |
| Refresh Token |
oauth/refresh-token.md |
Token renewal |
| Data Model |
datamodel/salesforce-erd.md |
Object relationships |
| Integration |
integration/api-sequence.md |
API callout patterns |
| Architecture |
architecture/system-landscape.md |
System overview |
| Role Hierarchy |
role-hierarchy/user-hierarchy.md |
Security model |
| Agentforce |
agentforce/agent-flow.md |
AI agent architecture |
Scoring System (80 Points)
| Category |
Points |
Criteria |
| Accuracy |
20 |
Correct actors, flow steps, relationships |
| Clarity |
20 |
Readable labels, logical layout |
| Completeness |
15 |
All key elements included |
| Styling |
15 |
Color scheme, theming, annotations |
| Best Practices |
10 |
Proper notation, UML conventions |
Color Palette
Tailwind-inspired pastel colors with dark borders (see references/color-palette.md):
| Component |
Fill (200) |
Stroke (700+) |
| AI & Agents |
#fbcfe8 |
#be185d |
| Integration |
#fed7aa |
#c2410c |
| Development |
#ddd6fe |
#6d28d9 |
| Metadata |
#a5f3fc |
#0e7490 |
| Data |
#fde68a |
#b45309 |
| Deploy |
#a7f3d0 |
#047857 |
Example Output
Mermaid Diagram
sequenceDiagram
autonumber
participant A as Server
participant SF as Salesforce
A->>A: Create JWT
A->>SF: POST /token (JWT)
SF->>SF: Validate Signature
SF->>A: Access Token
ASCII Fallback
┌───────────────┐ ┌───────────────┐
│ Server │ │ Salesforce │
└───────┬───────┘ └───────┬───────┘
│ 1. Create JWT │
│ 2. POST /token │
│────────────────────>│
│ │
│ 3. Validate JWT │
│ │
│ 4. Access Token │
│<────────────────────│
Cross-Skill Integration
| Skill |
Integration |
| generating-custom-object / generating-custom-field |
Auto-discover objects/fields for ERD |
| configuring-connected-apps |
Link OAuth flows to app setup |
| developing-agentforce |
Visualize agent architecture |
Documentation
37aa84df42