# Introduction
URL: /diagrammatic/docs

Seventy chart forms for React, drawn as server-rendered SVG with zero dependencies and themed by CSS tokens.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

`diagrammatic` draws charts as SVG on the server. Every form is a pure function with no hooks and no browser APIs, so it renders in a React Server Component, in SSR, or in a static export as is. A figure is drawn in CSS pixels at a stated `width` and inherits the page's font, and its colors resolve through `--dg-*` custom properties, so it reskins with your design system and needs no configuration.

- entries

  - solar → grid

    46

  - wind → grid

    24

  - hydro → grid

    12

  - gas → bunker

    32

  - grid → homes

    40

  - grid → industry

    31

  - grid → export

    11

  - bunker → industry

    12

  - bunker → transport

    20

  - solar

    46

  - gas

    32

  - wind

    24

  - hydro

    12

  - grid

    82

  - bunker

    32

  - homes

    40

  - industry

    43

  - transport

    20

  - export

    11

- unit

  TWh

* aspect

  2.2

* title

  Energy from sources to uses

* labels

  - source
  - convert
  - use

* graph

  - nodes

    - - id

        solar

      - label

        solar 46

      - group

        0

    - - id

        gas

      - label

        gas 32

      - group

        0

    - - id

        wind

      - label

        wind 24

      - group

        0

    - - id

        hydro

      - label

        hydro 12

      - group

        0

    - - id

        grid

      - label

        grid 82

      - group

        1

    - - id

        bunker

      - label

        fuel 32

      - group

        1

    - - id

        homes

      - label

        homes 40

      - group

        2

    - - id

        industry

      - label

        industry 43

      - group

        2

    - - id

        transport

      - label

        transport 20

      - group

        2

    - - id

        export

      - label

        export 11

      - group

        2

  - links

    - - source

        solar

      - target

        grid

      - value

        46

    - - source

        wind

      - target

        grid

      - value

        24

    - - source

        hydro

      - target

        grid

      - value

        12

    - - source

        gas

      - target

        bunker

      - value

        32

    - - source

        grid

      - target

        homes

      - value

        40

    - - source

        grid

      - target

        industry

      - value

        31

    - - source

        grid

      - target

        export

      - value

        11

    - - source

        bunker

      - target

        industry

      - value

        12

    - - source

        bunker

      - target

        transport

      - value

        20

fig. 01 · 114 TWh, sources to uses

## Install

```bash
npm install diagrammatic
```

React 18 or 19 is the only peer. The package has no runtime dependencies.

## Draw a chart

```
import { Line } from "diagrammatic";

export default function Page() {
  return (
    <Line
      title="Weekly active users"
      labels={["W1", "W2", "W3", "W4", "W5", "W6"]}
      data={[1200, 1350, 1310, 1580, 1720, 1910]}
      yTicks={4}
    />
  );
}
```

No `"use client"`, no provider, and no stylesheet is required. Defaults are the product: a validated categorical palette, diverging pairs with a neutral midpoint, zero-based bars, and a legend whenever a chart has two or more named series.

## Entry points

| Entry                      | Contents                                                                                      |
| -------------------------- | --------------------------------------------------------------------------------------------- |
| `diagrammatic`             | 68 chart components, `SmallMultiples`, `Legend`, tile sets, and the scale and text helpers    |
| `diagrammatic/interactive` | `Root`, `Tooltip`, `Zoom`, `Fit`, `getMarkDatum`, `getSeriesColor`, `applyHighlight` (client) |
| `diagrammatic/spec`        | `Chart`, `validateSpec`, `CHART_TYPES`, and the `ChartSpec` type                              |
| `diagrammatic/world`       | `WorldMap` and `DotWorldMap` with their country geometry                                      |
| `diagrammatic/styles.css`  | Token defaults and the highlight styles                                                       |
| `diagrammatic/shadcn.css`  | A bridge from shadcn/ui theme tokens to chart tokens                                          |

## Pages

- [Quickstart](/diagrammatic/docs/quickstart) —

  Draw a chart, theme it, and add a tooltip.

- [All charts](/diagrammatic/docs/charts) —

  Every chart, one page each, with live examples and props.

- [Theming](/diagrammatic/docs/theming) —

  The seven tokens, the shadcn/ui bridge, and dark mode.

- [Interaction](/diagrammatic/docs/interaction) —

  Tooltips, highlight, and clicks on server-rendered charts.

- [Charts from a model](/diagrammatic/docs/ai-specs) —

  Validate a JSON spec and draw it, in a thread or anywhere else.

- [Migrating from Recharts](/diagrammatic/docs/migrating-from-recharts) —

  Map a Recharts dashboard onto the forms.