external-diagram-mermaid-generate

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

Updated Jul 2, 2026
One-click install
npx skills add https://github.com/padjei/SF_Build --skill external-diagram-mermaid-generate-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: external-diagram-mermaid-generate
Source: https://github.com/padjei/SF_Build/tree/main/.claude/skills/external-diagram-mermaid-generate
Command: npx skills add https://github.com/padjei/SF_Build --skill external-diagram-mermaid-generate-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating accurate Salesforce architecture documentation—OAuth flows, ERDs, integration sequences, and system landscapes—requires tedious manual diagramming that quickly goes stale and cannot live in version-controlled Markdown files. ## Core Features & Use Cases - Mermaid Diagram Generation: Produces sequence diagrams for OAuth flows (Authorization Code, PKCE, JWT Bearer, Client Credentials, Device Flow), ERDs for Salesforce data models, integration sequences, role hierarchies, and Agentforce agent flows. - ASCII Fallback Output: Delivers terminal-friendly text diagrams when a Mermaid renderer is unavailable, keeping documentation readable in plain-text contexts. - Org-Grounded ERDs: Uses a metadata query script to pull real object counts, OWD settings, and LDV indicators from a Salesforce org for accurate data model diagrams. - Live Preview Server: Includes a zero-dependency Python HTTP server with live reload so diagrams can be iterated in a browser. - Use Case: Ask for an ERD of Account, Contact, and Opportunity and receive a styled Mermaid flowchart with relationship types (Lookup vs Master-Detail), a color-blind-friendly palette, and an ASCII version for your README. ## Quick Start Ask the assistant to create a JWT Bearer OAuth flow diagram or an ERD for your Salesforce objects, and request the ASCII fallback if you need terminal-compatible output.

Frequently Asked Questions about external-diagram-mermaid-generate

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 Mermaid flowchart with relationship arrows distinguishing Lookup from Master-Detail, plus object type color coding for standard, custom, and external objects.

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

Ask for the specific grant type, such as a JWT Bearer or Authorization Code PKCE flow. The skill loads a matching template and produces a numbered Mermaid sequence diagram with correct actors, request and response arrows, and protocol notes.

Can I preview Mermaid diagrams locally in a browser?▼

Yes, the included mermaid_preview.py script starts a local server on port 8765 with live reload via Server-Sent Events. Save your diagram to a file, start the server, and the browser auto-refreshes whenever the file changes.

Does Mermaid diagram generation work without a renderer?▼

Yes, every diagram includes an ASCII fallback using box-drawing characters that renders in any terminal or plain-text document. The Mermaid code block is still provided for pasting into GitHub, Confluence, or other renderers.

When should I use Mermaid diagrams instead of image-based diagrams?▼

Use Mermaid when diagrams must live in version-controlled Markdown like READMEs, docs, or issues. If you need rendered PNG or SVG images or polished visual mockups, use a visual diagram generation skill instead.

Why does my Mermaid diagram not render on GitHub or VS Code?▼

Custom fonts and some init directives are overridden by platform defaults, and multi-line labels with br tags can cause text cutoff. Keep labels short, use individual style declarations, and validate syntax in the Mermaid Live Editor.