Eraser Diagrams

Eraser Diagrams is a tool for creating technical diagrams using a code-based syntax that renders architecture diagrams, sequence diagrams, entity relationship diagrams, and flowcharts from text definitions. It covers diagram types, syntax conventions, styling options, export formats, and collaboration workflows that enable developers to document systems as code.

What Is This?

Overview

Eraser Diagrams provides structured approaches to creating technical diagrams through text-based definitions. It handles rendering cloud architecture diagrams with service icons and connection flows, generating sequence diagrams showing message exchanges between system components, creating entity relationship diagrams for database schema visualization, building flowcharts for process and decision logic, and exporting diagrams as PNG, SVG, or embeddable links.

Who Should Use This

This skill serves software architects documenting system designs, backend developers visualizing API interaction flows, database engineers diagramming schema relationships, and technical writers creating visual documentation for engineering teams.

Why Use It?

Problems It Solves

GUI diagramming tools produce files that cannot be version controlled or diffed meaningfully. Manually drawn diagrams become outdated as systems evolve. Sharing diagrams across teams causes format compatibility issues. Without code-based diagrams, documentation drifts from actual systems.

Core Highlights

Text-based syntax stores diagrams in version control alongside the code they describe. Automatic layout handles positioning without manual drag-and-drop arrangement. Multiple diagram types cover architecture, sequence, ER, and flow visualizations. Export options produce images and embeddable links for documentation platforms.

How to Use It?

Basic Usage

title: Payment Service Architecture

Client [icon: monitor]
API Gateway [icon: cloud]
Auth Service [icon: lock]
Payment Service [icon: credit-card]
Database [icon: database]
Queue [icon: message-queue]
Notification Service [icon: bell]

Client > API Gateway: HTTPS requests
API Gateway > Auth Service: Validate token
API Gateway > Payment Service: Process payment
Payment Service > Database: Store transaction
Payment Service > Queue: Publish event
Queue > Notification Service: Send receipt

sequence-diagram:
  Client -> API Gateway: POST /payments
  API Gateway -> Auth Service: Verify JWT
  Auth Service --> API Gateway: Token valid
  API Gateway -> Payment Service: Charge card
  Payment Service -> Database: INSERT transaction
  Payment Service --> API Gateway: Payment confirmed
  API Gateway --> Client: 200 OK

Real-World Examples

from dataclasses import dataclass, field

@dataclass
class Node:
    name: str
    icon: str = ""
    group: str = ""

@dataclass
class Connection:
    source: str
    target: str
    label: str = ""

class DiagramBuilder:
    def __init__(self, title):
        self.title = title
        self.nodes = []
        self.connections = []
        self.groups = {}

    def add_node(self, name, icon="", group=""):
        self.nodes.append(Node(name, icon, group))
        if group:
            self.groups.setdefault(group, []).append(name)
        return self

    def connect(self, source, target, label=""):
        self.connections.append(
            Connection(source, target, label)
        )
        return self

    def render(self):
        lines = [f"title: {self.title}", ""]
        for group_name, members in self.groups.items():
            lines.append(f"{group_name} {{")
            for m in members:
                node = next(
                    n for n in self.nodes if n.name == m
                )
                icon = f" [icon: {node.icon}]" if node.icon else ""
                lines.append(f"  {node.name}{icon}")
            lines.append("}")
        for node in self.nodes:
            if not node.group:
                icon = f" [icon: {node.icon}]" if node.icon else ""
                lines.append(f"{node.name}{icon}")
        lines.append("")
        for conn in self.connections:
            label = f": {conn.label}" if conn.label else ""
            lines.append(
                f"{conn.source} > {conn.target}{label}"
            )
        return "\n".join(lines)

diagram = DiagramBuilder("Microservices Architecture")
diagram.add_node("Web App", "monitor", "Frontend")
diagram.add_node("Mobile App", "phone", "Frontend")
diagram.add_node("User Service", "users", "Backend")
diagram.add_node("Order Service", "cart", "Backend")
diagram.add_node("PostgreSQL", "database")
diagram.connect("Web App", "User Service", "REST API")
diagram.connect("Mobile App", "User Service", "REST API")
diagram.connect("User Service", "PostgreSQL", "Queries")
diagram.connect("Order Service", "PostgreSQL", "Queries")
print(diagram.render())

Advanced Tips

Use groups to visually cluster related services like frontend, backend, and data layers. Store diagram definitions alongside the code they document so changes are reviewed together. Generate diagrams from infrastructure-as-code definitions to keep visuals synchronized with actual deployments.

When to Use It?

Use Cases

Use Eraser Diagrams when documenting microservice architectures with service dependencies, when visualizing API interaction sequences for design reviews, when creating ER diagrams for database schema documentation, or when building flowcharts for process documentation.

Related Topics

Mermaid diagram syntax, PlantUML generation, C4 model architecture documentation, diagram-as-code practices, and technical documentation workflows complement Eraser Diagrams.

Important Notes

Requirements

Eraser account or CLI tool for rendering diagrams. Text editor supporting the diagram syntax. Export capability for embedding diagrams in documentation platforms.

Usage Recommendations

Do: keep diagrams focused on a single aspect of the system rather than combining everything into one view. Use descriptive connection labels to clarify the nature of interactions. Version control diagram source files alongside the application code they describe.

Don't: include excessive detail that makes diagrams unreadable at normal zoom levels. Create diagrams without a clear audience and purpose, leading to unused documentation. Manually position elements when automatic layout produces acceptable results.

Limitations

Text-based syntax cannot express every visual layout preference that drag-and-drop tools support. Automatic layout may not produce optimal arrangements for complex architectures. Rendering requires the Eraser service.