Agent skill
blog-mermaid
Create mermaid diagrams for blog posts using the blog's sky/zinc color theme. Use when adding flowcharts, sequence diagrams, or other mermaid visualizations to blog content.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/blog-mermaid
SKILL.md
Blog Mermaid Diagrams
Create mermaid diagrams that match the blog's visual theme.
Color Theme
The blog uses sky as primary and zinc as neutral colors.
| Element | Light Mode | Dark Mode |
|---|---|---|
| Background | white | #020618 |
| Primary fill | sky-100 | sky-900 |
| Secondary fill | zinc-100 | zinc-800 |
| Borders/lines | sky-600 | sky-500 |
| Text | zinc-900 | zinc-100 |
| Accent/highlight | sky-400 | sky-400 |
Diagram Style Guidelines
- Keep it simple - Prefer fewer nodes with clear relationships
- Use horizontal layouts -
flowchart LRreads better thanTBfor most cases - Group related items - Use subgraphs to cluster concepts
- Consolidate arrows - Use
&syntax:A & B & C --> D - Minimal labels - Edge labels should be 1-3 words max
Flowchart Template
flowchart LR
subgraph GroupName
A[Node A]
B[Node B]
end
A --> C[Result]
B --> C
Sequence Diagram Template
sequenceDiagram
participant A as Actor
participant B as System
A->>B: action
B-->>A: response
State Diagram Alternative
Prefer flowcharts over state diagrams - they render more reliably:
flowchart TB
Start([Start]) --> State1
State1 -->|condition| State2
State2 --> End([End])
Examples
Good: Simple and clear
flowchart LR
Lead[Orchestrator] -->|spawns| W1 & W2 & W3
W1 & W2 & W3 -->|report| Lead
Bad: Over-complicated
flowchart TB
subgraph Layer1[First Layer]
direction LR
A1[Component A1] --> A2[Component A2]
A2 --> A3[Component A3]
end
subgraph Layer2[Second Layer]
direction LR
B1[Component B1] --> B2[Component B2]
end
A1 --> B1
A2 --> B2
A3 --> B1
A3 --> B2
Simplify to essential relationships only.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?