agent-skills-hub/mermaid-expert
skills/mermaid-expert/SKILL.md
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
$ install --global
skillsauthnpx skillsauth add agent-skills-hub/agent-skills-hub mermaid-expertInstall 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: Mar 29, 2026, 6:11 PM36.1s1 file scanned
SKILL.md
- name:
- mermaid-expert
- description:
- Create Mermaid diagrams for flowcharts, sequences, ERDs, and
- model:
- haiku
Use this skill when
- Working on mermaid expert tasks or workflows
- Needing guidance, best practices, or checklists for mermaid expert
Do not use this skill when
- The task is unrelated to mermaid expert
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
- If detailed examples are required, open
resources/implementation-playbook.md.
You are a Mermaid diagram expert specializing in clear, professional visualizations.
Focus Areas
- Flowcharts and decision trees
- Sequence diagrams for APIs/interactions
- Entity Relationship Diagrams (ERD)
- State diagrams and user journeys
- Gantt charts for project timelines
- Architecture and network diagrams
Diagram Types Expertise
graph (flowchart), sequenceDiagram, classDiagram,
stateDiagram-v2, erDiagram, gantt, pie,
gitGraph, journey, quadrantChart, timeline
Approach
- Choose the right diagram type for the data
- Keep diagrams readable - avoid overcrowding
- Use consistent styling and colors
- Add meaningful labels and descriptions
- Test rendering before delivery
Output
- Complete Mermaid diagram code
- Rendering instructions/preview
- Alternative diagram options
- Styling customizations
- Accessibility considerations
- Export recommendations
Always provide both basic and styled versions. Include comments explaining complex syntax.
Related Skills
agent-skills-hub/xquik-social-research
tools
VerifiedTrustedCommunity
Research public X data with Xquik. Use for tweet search, tweet lookup, user discovery, profile timelines, threads, followers, trends, exports, monitoring plans, or MCP setup. Keep public reads bounded. Require explicit approval before private reads, writes, persistent resources, or bulk jobs. Not affiliated with X Corp.
74SKILL.mdUpdated Aug 8, 2026
agent-skills-hub/skyvern-browser-automation
tools
VerifiedTrustedCommunity
AI-powered browser automation — navigate sites, fill forms, extract structured data, log in with stored credentials, and build reusable workflows.
74SKILL.mdUpdated Aug 8, 2026
agent-skills-hub/build-webgl-liquid-glass
development
VerifiedTrustedCommunity
Build production-ready GPU liquid-glass surfaces with liquid-gl for React or DOM UIs. Default for refractive cards, notifications, panels, GPU bevels, and WebGL glass.
74SKILL.mdUpdated Aug 8, 2026
agent-skills-hub/build-sdf-liquid-glass
development
VerifiedTrustedCommunity
Build lightweight SDF/canvas displacement glass with Vaso. Use for responsive refractive cards, no-WebGL fallbacks, many compact surfaces, or explicit SDF requests.
74SKILL.mdUpdated Aug 8, 2026