Excalidraw Architect Skill

Name: excalidraw-architect
Rating: 62
Author: lorenzejay

Description

This skill analyzes source code files and generates an architectural diagram in Excalidraw JSON format. It identifies classes, functions, and their relationships, then visualizes them as connected rectangles.

Instructions

•Analyze: Use List Directory and File Read to understand the codebase structure and relationships.
•
Design: Plan a visual layout where:
- •Files/Modules are large rectangles.
- •Classes are rectangles within modules.
- •Relationships (imports, inheritance, calls) are arrows connecting them.
•
Generate JSON: Construct a valid Excalidraw JSON object.
- •Use type: "rectangle" for components.
- •Use type: "arrow" for connections.
- •Use type: "text" for labels.
- •Ensure unique ids for all elements.
•Output: Write the JSON content to a file named architecture.excalidraw.

Excalidraw JSON Template (Simplified)

json

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "unique-id-1",
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100,
      "strokeColor": "#000000",
      "backgroundColor": "transparent",
      "fillStyle": "hachure",
      "strokeWidth": 1,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "strokeSharpness": "sharp",
      "seed": 123456,
      "version": 1,
      "versionNonce": 0,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1,
      "link": null,
      "locked": false
    },
    {
      "id": "unique-id-2",
      "type": "text",
      "x": 110,
      "y": 110,
      "width": 180,
      "height": 80,
      "text": "ClassName",
      "fontSize": 20,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "middle"
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  }
}