PluginPublic

gamussa/presenterm

Create terminal-based presentation slides using presenterm's markdown format with themes, diagrams, code highlighting, and more

2.15x

Quality

90%

Does it follow best practices?

Impact

97%

2.15x

Average score across 5 eval scenarios

Securityby

Passed

No findings from the security scan

D2 Diagrams Reference

Use d2 +render on a fenced code block. Requires d2 CLI installed.

Basic Shapes and Connections

```d2 +render
Producer -> Kafka Broker: publish
Kafka Broker -> Consumer: subscribe
Kafka Broker -> Storage: persist

Producer.shape: rectangle
Storage.shape: cylinder
```

Shapes: rectangle (default), square, circle, oval, diamond, hexagon, cloud, cylinder, queue, package, page, document, parallelogram, step, callout, stored_data, person, text, image.

Connections: -> directed, <- reverse, <-> bidirectional, -- undirected. Chain: a -> b -> c. Labels: a -> b: label text.

Containers (Nesting)

```d2 +render
direction: right

Backend: Backend Services {
    api: API Server
    worker: Background Worker
    db: Database {
        shape: cylinder
    }
    api -> worker: enqueue
    worker -> db: persist
}

Frontend: Web App {
    ui: React UI
    state: State Store
}

Frontend.ui -> Backend.api: REST calls
```

Any shape with children becomes a container. Use dot notation for flat references: server.process. Connect across containers with full paths.

Styling

```d2 +render
direction: right

kafka: Apache Kafka {
    style: {
        fill: "#2A2A2A"
        stroke: "#E8488B"
        border-radius: 8
        font-color: "#FFFFFF"
    }
    broker1: Broker 1
    broker2: Broker 2
    broker1 <-> broker2: replicate {
        style: {
            stroke: "#4ECDC4"
            animated: true
        }
    }
}

producer: Producer {
    style.fill: "#4A90D9"
    style.font-color: white
}

producer -> kafka.broker1: publish {
    style.stroke-dash: 3
}
```

Key style properties: fill (background), stroke (border/line color), stroke-width (1-15), stroke-dash (0-10), border-radius (0-20), shadow (true/false), 3d (rectangles only), multiple (stacked effect), opacity (0-1), font-size (8-100), font-color, font: mono, bold, italic, animated (connections only), fill-pattern (dots/lines/grain).

Reusable Classes and Globs

classes: {
    service: {
        style: { fill: "#264653"; font-color: white; border-radius: 8 }
    }
    database: {
        shape: cylinder
        style: { fill: "#2A9D8F"; font-color: white }
    }
}

api: API { class: service }
auth: Auth Service { class: service }
db: PostgreSQL { class: database }

Globs apply styles broadly: *.style.fill: "#333" sets all shapes. Double globs (**) apply recursively into nested containers.

SQL Tables / ER Diagrams

```d2 +render
topics: Topics {
    shape: sql_table
    id: int {constraint: primary_key}
    name: varchar
    partitions: int
    replication: int
}

messages: Messages {
    shape: sql_table
    id: bigint {constraint: primary_key}
    topic_id: int {constraint: foreign_key}
    key: bytea
    value: bytea
    timestamp: bigint
}

topics.id <-> messages.topic_id
```

Sequence Diagrams

```d2 +render
shape: sequence_diagram

client: Client
gateway: API Gateway
service: Order Service
kafka: Kafka

client -> gateway: POST /orders
gateway -> service: createOrder()
service -> kafka: produce("orders", event)
kafka -> service: ack
service -> gateway: 201 Created
gateway -> client: Response
```

Icons and Images

aws: AWS {
    icon: https://icons.terrastruct.com/aws%2F_Group%20Icons%2FAWS-Cloud-alt_light-bg.svg
}

Use icon: <url> on any shape. Use shape: image for standalone images. Free icons at https://icons.terrastruct.com.

Layout and Direction

Set global direction: direction: right (options: up, down, left, right).

Layout engines (set via CLI --layout flag):

dagre (default) — fast hierarchical, based on Graphviz DOT
ELK — mature academic engine, clean orthogonal routing
TALA — commercial engine, best for software architecture diagrams

Variables

vars: {
    primary: "#4A90D9"
    accent: "#E8488B"
}

service: My Service {
    style.fill: ${primary}
    style.stroke: ${accent}
}

skills

presenterm

references