claude-timemachine
c14d251142
Five skills copied for Jerry to study how Anthropic structures task-specific guidance for a coding agent. Not Jerry's own skills — examples of the pattern. mermaid/ Anthropic built-in; 18+ diagram types with on-demand references/ caveman/ Plugin: compressed communication mode (3 intensity levels) caveman-commit/ Plugin: conventional-commit message generation caveman-review/ Plugin: compressed PR review comments compress/ Plugin: memory-file compression The worth-borrowing pattern: every SKILL.md has a trigger line, rules, worked examples, and boundaries. Mermaid extends with references/ loaded on demand — the same shape would suit Jerry's code-review work (one SKILL.md plus per-topic references like go-concurrency.md, auth.md). README in the directory explains the layout and how Jerry can use these. — Claude Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
109 lines
5.1 KiB
Markdown
109 lines
5.1 KiB
Markdown
---
|
|
name: mermaid
|
|
description: Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
|
|
allowed-tools: Read Write Edit
|
|
metadata:
|
|
argument-hint: "[diagram description or requirements]"
|
|
---
|
|
|
|
# Mermaid Diagram Generator
|
|
|
|
Generate high-quality Mermaid diagram code based on user requirements.
|
|
|
|
## Workflow
|
|
|
|
1. **Understand Requirements**: Analyze user description to determine the most suitable diagram type
|
|
2. **Read Documentation**: Read the corresponding syntax reference for the diagram type
|
|
3. **Generate Code**: Generate Mermaid code following the specification
|
|
4. **Apply Styling**: Apply appropriate themes and style configurations
|
|
|
|
## Diagram Type Reference
|
|
|
|
Select the appropriate diagram type and read the corresponding documentation:
|
|
|
|
| Type | Documentation | Use Cases |
|
|
| ---- | ------------- | --------- |
|
|
| Flowchart | [flowchart.md](references/flowchart.md) | Processes, decisions, steps |
|
|
| Sequence Diagram | [sequenceDiagram.md](references/sequenceDiagram.md) | Interactions, messaging, API calls |
|
|
| Class Diagram | [classDiagram.md](references/classDiagram.md) | Class structure, inheritance, associations |
|
|
| State Diagram | [stateDiagram.md](references/stateDiagram.md) | State machines, state transitions |
|
|
| ER Diagram | [entityRelationshipDiagram.md](references/entityRelationshipDiagram.md) | Database design, entity relationships |
|
|
| Gantt Chart | [gantt.md](references/gantt.md) | Project planning, timelines |
|
|
| Pie Chart | [pie.md](references/pie.md) | Proportions, distributions |
|
|
| Mindmap | [mindmap.md](references/mindmap.md) | Hierarchical structures, knowledge graphs |
|
|
| Timeline | [timeline.md](references/timeline.md) | Historical events, milestones |
|
|
| Git Graph | [gitgraph.md](references/gitgraph.md) | Branches, merges, versions |
|
|
| Quadrant Chart | [quadrantChart.md](references/quadrantChart.md) | Four-quadrant analysis |
|
|
| Requirement Diagram | [requirementDiagram.md](references/requirementDiagram.md) | Requirements traceability |
|
|
| C4 Diagram | [c4.md](references/c4.md) | System architecture (C4 model) |
|
|
| Sankey Diagram | [sankey.md](references/sankey.md) | Flow, conversions |
|
|
| XY Chart | [xyChart.md](references/xyChart.md) | Line charts, bar charts |
|
|
| Block Diagram | [block.md](references/block.md) | System components, modules |
|
|
| Packet Diagram | [packet.md](references/packet.md) | Network protocols, data structures |
|
|
| Kanban | [kanban.md](references/kanban.md) | Task management, workflows |
|
|
| Architecture Diagram | [architecture.md](references/architecture.md) | System architecture |
|
|
| Radar Chart | [radar.md](references/radar.md) | Multi-dimensional comparison |
|
|
| Treemap | [treemap.md](references/treemap.md) | Hierarchical data visualization |
|
|
| User Journey | [userJourney.md](references/userJourney.md) | User experience flows |
|
|
| ZenUML | [zenuml.md](references/zenuml.md) | Sequence diagrams (code style) |
|
|
|
|
## Configuration & Themes
|
|
|
|
- [Theming](references/config-theming.md) - Custom colors and styles
|
|
- [Directives](references/config-directives.md) - Diagram-level configuration
|
|
- [Layouts](references/config-layouts.md) - Layout direction and spacing
|
|
- [Configuration](references/config-configuration.md) - Global settings
|
|
- [Math](references/config-math.md) - LaTeX math support
|
|
|
|
## Preferred Style (Flowcharts)
|
|
|
|
### Arrow weight by meaning
|
|
| Arrow | Use |
|
|
|-------|-----|
|
|
| `==>` | Main flow / happy path / player traffic |
|
|
| `-->` | API calls, decisions, branch outcomes |
|
|
| `-.->` | Async, background, retry loops |
|
|
|
|
### Color palette
|
|
Always include these classDefs in flowcharts:
|
|
```
|
|
classDef deploy fill:#d5e8d4,stroke:#82b366,color:#000
|
|
classDef svc fill:#dae8fc,stroke:#6c8ebf,color:#000
|
|
classDef pvc fill:#f5f5f5,stroke:#666,color:#000
|
|
classDef external fill:#f5f5f5,stroke:#666,color:#000,stroke-dasharray:5 5
|
|
classDef ok fill:#d5e8d4,stroke:#82b366,color:#000
|
|
classDef kick fill:#f8cecc,stroke:#b85450,color:#000
|
|
```
|
|
|
|
### Layout rules
|
|
- **Natural depth** — each terminal node gets its own exit point; no shared terminals across paths of different lengths. Dagre places nodes at `max(predecessor depths) + 1`.
|
|
- **Side API calls** — branch API call nodes off the calling node with `-->` at the same depth as the next decision node so they appear side-by-side, not inline in the `==>` chain.
|
|
- **Terminal naming** — prefix `✓` for success, `✗` for failure (e.g. `✗ Kick: account locked`).
|
|
- **Section comments** — use `%% ── Section name ──` to separate logical groups (traffic, auth, control plane, etc.).
|
|
|
|
## Output Specification
|
|
|
|
Generated Mermaid code should:
|
|
|
|
1. Be wrapped in ```mermaid code blocks
|
|
2. Have correct syntax that renders directly
|
|
3. Have clear structure with proper line breaks and indentation
|
|
4. Use semantic node naming
|
|
5. Apply the preferred style above for flowcharts
|
|
|
|
## Example Output
|
|
|
|
```mermaid
|
|
flowchart TD
|
|
A[Start] --> B{Condition}
|
|
B -->|Yes| C(["✓ Done"]):::ok
|
|
B -->|No| D(["✗ Failed"]):::kick
|
|
|
|
classDef ok fill:#d5e8d4,stroke:#82b366,color:#000
|
|
classDef kick fill:#f8cecc,stroke:#b85450,color:#000
|
|
```
|
|
|
|
---
|
|
|
|
User requirements: $ARGUMENTS
|