Skill Gallery
← Back to list
mcclowes

mermaid-diagrams

by mcclowes

A pipe-oriented functional programming language with a tree-walk interpreter written in TypeScript.

⭐ 3🍴 0📅 Jan 12, 2026
functional-programminglanguageleapipeline
View on GitHubRun in Manus

SKILL.md

name: mermaid-diagrams

prettier-ignore

description: Use when creating Mermaid diagrams - covers flowcharts, sequence diagrams, and AST visualization

Mermaid Diagram Best Practices

Quick Start

flowchart TD
    A[Source Code] --> B[Lexer]
    B --> C[Tokens]
    C --> D[Parser]
    D --> E[AST]
    E --> F[Interpreter]
    F --> G[Result]

Diagram Types

Flowchart (AST Visualization)

flowchart TD
    subgraph "BinaryExpr"
        op["+"]
        left[NumberLiteral: 2]
        right[NumberLiteral: 3]
    end
    op --> left
    op --> right

Sequence Diagram (Execution Flow)

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

State Diagram (Token States)

stateDiagram-v2
    [*] --> Start
    Start --> Number: digit
    Start --> String: quote
    Start --> Identifier: letter
    Number --> Number: digit
    Number --> [*]: other
    String --> String: char
    String --> [*]: quote

Class Diagram (AST Types)

classDiagram
    class Expr {
        <<interface>>
    }
    class NumberLiteral {
        +number value
    }
    class BinaryExpr {
        +string op
        +Expr left
        +Expr right
    }
    Expr <|-- NumberLiteral
    Expr <|-- BinaryExpr

AST Node Styling

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

Generating from Code

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")}`;
}

HTML Embedding

<!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>

Reference Files

Score

Total Score

65/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
✓最近の活動

1ヶ月以内に更新

+10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon