skills.rest
amanpraaj
amanpraajCOMMUNITY
Explore all skills by this author →
GitHub

sf-diagram-mermaid

Generates Salesforce architecture diagrams in Mermaid syntax with ASCII fallback output.

1|Updated May 7, 2026
Search Tags:#mermaid#oauth#sequence diagram#salesforce#diagram#erd#ascii
One-click install
npx skills add https://github.com/amanpraaj/sf-skill-hub --skill sf-diagram-mermaid-amanpraaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-diagram-mermaid
Source: https://github.com/amanpraaj/sf-skill-hub/tree/main/skills/salesforce/sf-diagram-mermaid
Command: npx skills add https://github.com/amanpraaj/sf-skill-hub --skill sf-diagram-mermaid-amanpraaj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Creating accurate Salesforce architecture documentation—OAuth flows, ERDs, integration sequences, and system landscapes—requires manual diagramming effort and often produces inconsistent, hard-to-maintain visuals that cannot live in version-controlled Markdown. ## Core Features & Use Cases - Mermaid Diagram Generation: Produces sequence diagrams for OAuth flows (Authorization Code, PKCE, JWT Bearer, Client Credentials, Device Flow), flowchart-based ERDs, integration sequences, role hierarchies, and Agentforce agent maps. - ASCII Fallback Output: Renders terminal-friendly ASCII versions of every diagram for plaintext documentation and CLI contexts. - Org-Grounded ERDs: Queries live Salesforce orgs via the sf CLI for record counts (LDV indicators), OWD sharing settings, and object types to annotate data model diagrams. - Live Preview Server: Ships a zero-dependency Python HTTP server with Server-Sent Events live reload, SVG download, and dark mode for iterating on diagrams in a browser. - Use Case: Ask for an ERD of Account, Contact, and Opportunity and receive a styled Mermaid flowchart with LDV and OWD annotations pulled from your actual org, plus an ASCII version for your README. ## Quick Start Ask the agent to create a JWT Bearer OAuth flow diagram or an ERD for your Salesforce objects, and optionally request a live browser preview.

Frequently Asked Questions about sf-diagram-mermaid

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

FAQPage Schema
How do I create a Salesforce ERD diagram in Mermaid?▼

Request an ERD naming the objects you need, such as Account, Contact, and Opportunity. The skill generates a flowchart LR diagram with relationship arrows, and can query your org via the sf CLI to add LDV record counts and OWD sharing annotations.

How do I diagram Salesforce OAuth flows like JWT Bearer or PKCE?▼

Ask for the specific flow by name, such as a JWT Bearer or Authorization Code PKCE sequence diagram. The skill produces a Mermaid sequenceDiagram with autonumbered steps covering token requests, validation, and responses, plus an ASCII fallback.

Can I preview Mermaid diagrams live in a browser?▼

Yes. Run the bundled mermaid_preview.py script with the start command and a diagram file path. It launches a localhost server on port 8765 with live reload via Server-Sent Events, SVG download, and automatic dark mode.

Does this skill work without a Mermaid renderer?▼

Yes. Every diagram includes an ASCII fallback using box-drawing characters that renders in any terminal or plaintext document. The ASCII versions follow width and alignment conventions for readability.

When should I use Mermaid diagrams instead of rendered images?▼

Use Mermaid when diagrams must live in Markdown files, READMEs, or issues under version control. If you need polished PNG or SVG image output for presentations, the skill delegates to sf-diagram-nanobananapro instead.

How are Salesforce object types shown in ERD diagrams?▼

Objects are color-coded by type: standard objects use sky blue fills, custom objects use orange, and external objects use green. Lookup relationships use single arrows while Master-Detail relationships use thick double arrows, with a legend subgraph included.

Related Skills

Explore More Software Engineering Skills→
forcedotcomforcedotcom
803

generating-mermaid-diagrams

Generate Salesforce architecture diagrams in Mermaid syntax with ASCII fallback.

Official
Intermediate
B4sanB4san

documentation

Generate project documentation including READMEs, API docs, and Mermaid/PlantUML architecture diagrams.

Community
Intermediate
forcedotcomforcedotcom
803

configuring-connected-apps

Generate and validate Salesforce OAuth metadata for Connected Apps and External Client Apps.

Official
Advanced
bwgzbwgz

mermaid-render

Render Mermaid diagrams to PNG, SVG, or PDF with Trimble themes.

Community
Advanced