Introduction

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.

Install

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

Pages