excalidraw-diagrams

name excalidraw-diagrams description Creates Excalidraw diagrams programmatically. Use when the user wants flowcharts, architecture diagrams, system designs, or any visual diagram instead of ASCII art. Outputs .excalidraw files that can be opened directly in Excalidraw or VS Code with the Excalidraw extension. Excalidraw Diagram Generator This skill generates Excalidraw diagrams programmatically using Python. Instead of creating ASCII diagrams, use this to produce professional-looking, editable diagrams. Output format : .excalidraw JSON files that can be: Opened at https://excalidraw.com (drag & drop the file) Edited in VS Code with the Excalidraw extension Embedded in documentation Exported to SVG/PNG for embedding in Google Docs, presentations, etc. Quick Start Method 1: Direct Python Script (Recommended) Write a Python script using the generator library and run it: #!/usr/bin/env python3 import sys import os sys.path.insert( 0 , os.path.expanduser( "~/.claude/skills/excalidraw-diagrams/scripts" )) from excalidraw_generator import Diagram, Flowchart, ArchitectureDiagram # Create your diagram d = Diagram() box1 = d.box( 100 , 100 , "Step 1" , color= "blue" ) box2 = d.box( 300 , 100 , "Step 2" , color= "green" ) d.arrow_between(box1, box2, "next" ) d.save( "my_diagram.excalidraw" ) Run with: python3 /path/to/your_script.py Method 2: Inline Python Execution python3 -c " import sys, os sys.path.insert(0, os.path.expanduser('~/.claude/skills/excalidraw-diagrams/scripts')) from excalidraw_generator import Diagram d = Diagram() a = d.box(100, 100, 'Hello', color='blue') b = d.box(300, 100, 'World', color='green') d.arrow_between(a, b) d.save('hello.excalidraw') print('Created: hello.excalidraw') " API Reference Diagram Class The base class for all diagrams. from excalidraw_generator import Diagram d = Diagram(background= "#ffffff" ) # white background Methods box(x, y, label, width=150, height=60, color="blue", shape="rectangle", font_size=18) Create a labeled shape. Returns an Element for connecting. x, y : Position (top-left corner) label : Text to display color : "blue", "green", "red", "yellow", "orange", "violet", "cyan", "teal", "gray", "black" shape : "rectangle", "ellipse", "diamond" box1 = d.box( 100 , 100 , "Process A" , color= "blue" ) box2 = d.box( 100 , 200 , "Decision?" , color= "yellow" , shape= "diamond" ) text_box(x, y, content, font_size=20, color="black") Create standalone text. d.text_box( 100 , 50 , "System Architecture" , font_size= 28 , color= "black" ) arrow_between(source, target, label=None, color="black", from_side="auto", to_side="auto") Draw an arrow between two elements. from_side , to_side : "auto", "left", "right", "top", "bottom" d.arrow_between(box1, box2, "sends data" ) d.arrow_between(box1, box3, from_side= "bottom" , to_side= "top" ) line_between(source, target, color="black") Draw a line (no arrowhead) between elements. save(path) Save the diagram. Extension .excalidraw added if not present. d.save( "output/my_diagram" ) # Creates output/my_diagram.excalidraw Configuration & Styling The diagram generator supports extensive customization through configuration classes. DiagramStyle - Global Appearance Control the overall look of all elements in the diagram: from excalidraw_generator import Diagram, DiagramStyle # Create a clean, professional diagram d = Diagram(diagram_style=DiagramStyle( roughness= 0 , # 0=clean, 1=hand-drawn, 2=rough sketch stroke_style= "solid" , # "solid", "dashed", "dotted" stroke_width= 2 , # Line thickness (1-4) color_scheme= "corporate" # Named color scheme )) Roughness levels: 0 - Architect: Clean, precise lines 1 - Artist: Normal hand-drawn look (default) 2 - Cartoonist: Rough, sketchy appearance Color Schemes Use semantic colors from predefined schemes: # Available schemes: "default", "monochrome", "corporate", "vibrant", "earth" d = Diagram(diagram_style=DiagramStyle(color_scheme= "vibrant" )) # Get colors by role primary = d.scheme_color( "primary" ) # Main components secondary = d.scheme_color( "secondary" ) # Supporting elements accent = d.scheme_color( "accent" ) # Highlights warning = d.scheme_color( "warning" ) # Caution states danger = d.scheme_color( "danger" ) # Error states neutral = d.scheme_color( "neutral" ) # Backgrounds, users Scheme color mappings: Scheme Primary Secondary Accent Warning Danger default blue green violet yellow red monochrome black gray gray gray black corporate blue teal violet orange red vibrant violet cyan orange yellow red earth teal green orange yellow red FlowchartStyle - Flowchart Customization Customize flowchart node colors and routing behavior: from excalidraw_generator import Flowchart, FlowchartStyle fc = Flowchart(flowchart_style=FlowchartStyle( start_color= "cyan" , # Start node color end_color= "red" , # End node color process_color= "blue" , # Process node color decision_color= "orange" , # Decision diamond color )) ArchitectureStyle - Architecture Diagram Customization from excalidraw_generator import ArchitectureDiagram, ArchitectureStyle arch = ArchitectureDiagram(architecture_style=ArchitectureStyle( component_color= "blue" , database_color= "green" , service_color= "violet" , user_color= "gray" , )) BoxStyle - Text Box Sizing Control automatic text box sizing: from excalidraw_generator import Diagram, BoxStyle d = Diagram(box_style=BoxStyle( h_padding= 40 , # Horizontal padding (total) v_padding= 24 , # Vertical padding (total) min_width= 80 , # Minimum box width min_height= 40 , # Minimum box height font_size= 18 , # Default font size font_family= "hand" # "hand", "normal", "code" )) Flowchart Class Specialized for flowcharts with automatic positioning. from excalidraw_generator import Flowchart fc = Flowchart(direction= "vertical" , spacing= 80 ) fc.start( "Begin" ) fc.process( "p1" , "Process Data" ) fc.decision( "d1" , "Valid?" ) fc.process( "p2" , "Save" ) fc.end( "Done" ) fc.connect( "__start__" , "p1" ) fc.connect( "p1" , "d1" ) fc.connect( "d1" , "p2" , label= "Yes" ) fc.connect( "d1" , "__end__" , label= "No" ) fc.save( "flowchart.excalidraw" ) Methods start(label="Start") - Green ellipse end(label="End") - Red ellipse process(node_id, label, color="blue") - Blue rectangle decision(node_id, label, color="yellow") - Yellow diamond node(node_id, label, shape, color, width, height) - Generic node connect(from_id, to_id, label=None) - Arrow between nodes position_at(x, y) - Set position for next node AutoLayoutFlowchart Class For complex flowcharts with automatic hierarchical layout. Requires grandalf package. from excalidraw_generator import AutoLayoutFlowchart, DiagramStyle, FlowchartStyle, LayoutConfig fc = AutoLayoutFlowchart( diagram_style=DiagramStyle(roughness= 0 ), # Clean lines flowchart_style=FlowchartStyle(decision_color= "orange" ), layout_config=LayoutConfig( vertical_spacing= 100 , horizontal_spacing= 80 , ) ) # Add nodes with semantic types fc.add_node( "start" , "Start" , shape= "ellipse" , color= "green" , node_type= "terminal" ) fc.add_node( "process1" , "Validate Input" , node_type= "process" ) fc.add_node( "check" , "Is Valid?" , shape= "diamond" , color= "yellow" , node_type= "decision" ) fc.add_node( "success" , "Process Data" , node_type= "process" ) fc.add_node( "error" , "Show Error" , color= "red" , node_type= "process" ) fc.add_node( "end" , "End" , shape= "ellipse" , color= "red" , node_type= "terminal" ) # Add edges (arrows) fc.add_edge( "start" , "process1" ) fc.add_edge( "process1" , "check" ) fc.add_edge( "check" , "success" , label= "Yes" ) fc.add_edge( "check" , "error" , label= "No" ) fc.add_edge( "success" , "end" ) fc.add_edge( "error" , "process1" , label= "Retry" ) # Back-edge auto-routes through whitespace # Compute layout and render result = fc.compute_layout( two_column= True , # Split tall diagrams into columns target_aspect_ratio= 0.8 , # Target width/height ratio ) fc.save( "auto_flowchart.excalidraw" ) Node types for routing: terminal - Start/end nodes process - Standard processing steps decision - Decision diamonds (arrows exit from sides) Methods add_node(node_id, label, shape, color, width, height, node_type) - Add a node add_edge(from_id, to_id, label, color) - Add an edge compute_layout(start_x, start_y, max_width, max_height, routing, two_column, target_aspect_ratio, column_gap) - Auto-position nodes ArchitectureDiagram Class For system architecture diagrams. from excalidraw_generator import ArchitectureDiagram arch = ArchitectureDiagram() # Add components at specific positions arch.user( "user" , "User" , x= 100 , y= 200 ) arch.component( "frontend" , "React App" , x= 250 , y= 200 , color= "blue" ) arch.service( "api" , "API Gateway" , x= 450 , y= 200 , color= "violet" ) arch.database( "db" , "PostgreSQL" , x= 650 , y= 200 , color= "green" ) # Connect them arch.connect( "user" , "frontend" , "HTTPS" ) arch.connect( "frontend" , "api" , "REST" ) arch.connect( "api" , "db" , "SQL" ) arch.save( "architecture.excalidraw" ) Methods component(id, label, x, y, width=150, height=80, color="blue") database(id, label, x, y, color="green") - Ellipse shape service(id, label, x, y, color="violet") user(id, label="User", x=100, y=100) - Gray ellipse connect(from_id, to_id, label=None, bidirectional=False) Color Reference