Menu
Use when creating Mermaid diagrams - covers flowcharts, sequence diagrams, and AST visualization
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when configuring ESLint - covers flat config, TypeScript integration, and custom rules
Use when creating GitHub Actions workflows - covers CI/CD, matrix testing, and release automation
Use when writing Jest tests - covers testing patterns for interpreters, parsers, and async code
Use when designing language features - covers lexer, parser, AST, and interpreter patterns
Use when implementing Language Server Protocol features - covers completions, hover, diagnostics, and navigation
Use when publishing npm packages - covers package.json configuration, versioning, and provenance
| name | mermaid-diagrams |
| description | Use when creating Mermaid diagrams - covers flowcharts, sequence diagrams, and AST visualization |
flowchart TD
A[Source Code] --> B[Lexer]
B --> C[Tokens]
C --> D[Parser]
D --> E[AST]
E --> F[Interpreter]
F --> G[Result]
flowchart TD
subgraph "BinaryExpr"
op["+"]
left[NumberLiteral: 2]
right[NumberLiteral: 3]
end
op --> left
op --> right
sequenceDiagram
participant User
participant REPL
participant Parser
participant Interpreter
User->>REPL: "2 + 3"
REPL->>Parser: parse()
Parser-->>REPL: AST
REPL->>Interpreter: evaluate(AST)
Interpreter-->>REPL: 5
REPL-->>User: 5
stateDiagram-v2
[*] --> Start
Start --> Number: digit
Start --> String: quote
Start --> Identifier: letter
Number --> Number: digit
Number --> [*]: other
String --> String: char
String --> [*]: quote
classDiagram
class Expr {
<<interface>>
}
class NumberLiteral {
+number value
}
class BinaryExpr {
+string op
+Expr left
+Expr right
}
Expr <|-- NumberLiteral
Expr <|-- BinaryExpr
flowchart TD
classDef literal fill:#e1f5fe
classDef expr fill:#fff3e0
classDef stmt fill:#e8f5e9
A[LetStmt]:::stmt --> B[Identifier: x]
A --> C[BinaryExpr]:::expr
C --> D[NumberLiteral: 2]:::literal
C --> E[NumberLiteral: 3]:::literal
function astToMermaid(node: Expr, id = "n0"): string {
const lines: string[] = [];
function visit(node: Expr, nodeId: string): void {
switch (node.type) {
case "NumberLiteral":
lines.push(` ${nodeId}["${node.value}"]`);
break;
case "BinaryExpr":
lines.push(` ${nodeId}["${node.op}"]`);
const leftId = `${nodeId}L`;
const rightId = `${nodeId}R`;
lines.push(` ${nodeId} --> ${leftId}`);
lines.push(` ${nodeId} --> ${rightId}`);
visit(node.left, leftId);
visit(node.right, rightId);
break;
}
}
visit(node, id);
return `flowchart TD\n${lines.join("\n")}`;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>
<div class="mermaid">
flowchart TD
A --> B
</div>
<script>mermaid.initialize({ startOnLoad: true });</script>
</body>
</html>