This skill should be used when the user asks about PlantUML syntax for any diagram type including C4-PlantUML, sequence, class, activity, state, ER, component, deployment, or use case diagrams. Also applies when troubleshooting PlantUML rendering errors, fixing layout conflicts between Rel_Down and Lay_Right, styling with skinparams or themes, or asking about C4 directional relationships and tier-based layout patterns.
npx claudepluginhub tractorjuice/arc-kitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/activity-diagrams.mdreferences/c4-plantuml.mdreferences/class-diagrams.mdreferences/common-syntax-errors.mdreferences/component-diagrams.mdreferences/deployment-diagrams.mdreferences/er-diagrams.mdreferences/sequence-diagrams.mdreferences/state-diagrams.mdreferences/styling-guide.mdreferences/use-case-diagrams.mdA comprehensive reference for PlantUML diagram types with a focus on C4-PlantUML for architecture diagrams. This skill provides syntax documentation adapted from the SpillwaveSolutions/plantuml project, supplemented with ArcKit-specific C4 layout conflict rules and best practices.
Select the appropriate diagram type and read the corresponding reference file:
| Type | Reference | ArcKit Commands Using It |
|---|---|---|
| C4-PlantUML | c4-plantuml.md | /arckit.diagram (C4 Context, Container, Component) |
| Sequence Diagram | sequence-diagrams.md | /arckit.diagram (Sequence mode) |
| Class Diagram | class-diagrams.md | — |
| Activity Diagram | activity-diagrams.md | — |
| State Diagram | state-diagrams.md | — |
| ER Diagram | er-diagrams.md | — |
| Component Diagram | component-diagrams.md | — |
| Use Case Diagram | use-case-diagrams.md | — |
| Deployment Diagram | deployment-diagrams.md | — |
| Topic | Reference |
|---|---|
| Common Syntax Errors | common-syntax-errors.md |
| Styling Guide | styling-guide.md |
The C4-PlantUML reference is the most important file for ArcKit users. It covers:
For C4 layout science (Sugiyama algorithm, edge crossing targets, declaration ordering), also see the Mermaid skill's c4-layout-science.md — Section 7 covers PlantUML directional hints.
These are the most common PlantUML syntax errors encountered when generating diagrams:
| Gotcha | Problem | Fix |
|---|---|---|
Rel_Down contradicts Lay_Right | Layout engine receives conflicting direction hints for the same element pair | Ensure every Rel_* direction is consistent with any Lay_* constraint on the same pair |
Missing @startuml/@enduml | Diagram fails to render entirely | Always wrap PlantUML code in @startuml and @enduml |
Wrong !include URL | C4 macros not found, syntax errors on Person/System/Container | Use exact URL from plantuml-stdlib: https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml |
Generic Rel instead of directional | Layout engine places elements randomly without direction hints | Always use Rel_Down, Rel_Right, etc. instead of plain Rel |
| Missing element declaration | Relationship references an undeclared element ID | Declare ALL elements before ANY relationships |
| Spaces in element IDs | Parser fails on IDs with spaces or special characters | Use camelCase or underscores: paymentApi, payment_api |
| Nested boundaries without content | Empty boundaries may cause rendering errors | Ensure every boundary contains at least one element |
\n in descriptions | Expects literal \n text but PlantUML renders it as a line break | This is expected behavior — PlantUML interprets \n as line breaks natively. Use \\n if literal text is needed |
This skill handles conversational PlantUML syntax questions — quick lookups, syntax examples, troubleshooting rendering issues, and learning about diagram types.
For formal architecture diagram generation with document control, project integration, layout science, and governance compliance, use the /arckit:diagram command instead. It generates versioned diagram artifacts saved to your project directory with full traceability to requirements and architecture principles.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.