[ install ]

Put a graph next to the prose.

One npm package: the graphs, the shared frame, and one optional stylesheet. Svelte 5 is the only peer. Theming is nine CSS variables.

[ station 01 ]

Add the package.

Graphs, frame, and theme in one install. No extra chart runtime.

pnpm add markgraphy

[ station 02 ]

Import the theme once.

In the root +layout.svelte. Dark by default, one accent. The header dots on this site do the same override at runtime.

+layout.svelte 
// +layout.svelte — import the base design tokens at the root
import 'fractalstyler2/styles';
import 'markgraphy/styles/index.sass';

let { children } = $props();

[ station 03 ]

Drop a graph.

Import any graph from markgraphy and pass data as props. The frame, the title, and the drawing come with it.

+page.svelte 
<script>
  import { GraphStat } from 'markgraphy';
</script>

<GraphStat
  title="THIS WEEK"
  items={[
    { value: '12,400', label: 'docs' },
    { value: '4,100', label: 'copies' },
    { value: '860', label: 'shipped', accent: true }
  ]}
/>
[ THIS WEEK ]

  • 12,400

    docs

  • 4,100

    copies

  • 860

    shipped

[ markdown ]

Use in a .svx file

Add a script importing the component, then place it between paragraphs. The frame spans the text column.

post.svx 
---
title: Field notes
---

<script>
  import { GraphMeter } from 'markgraphy';
</script>

## Throughput

<GraphMeter title="SHIPPED" value={0.67} caption="of plan" />

Prose flows around the figure. The frame spans the text column.

[ tokens ]

--graph-accent

The one highlight. Default Svelte orange.

--graph-accent-2

Second series when palette is duo or multi.

--graph-accent-3

Third cycle. Leave it alone unless earned.

--border

Dashed edge color. Keep it quieter than ink.

--graph-framer

The dash pattern itself: on-length, off-length.

--text-primary

Primary ink inside the frame.

--bg

What the title and corners knock out of the edge.

--text-secondary

Unused rows, captions, the receding path.

--text-muted

Empty cells and the quietest glyphs.

app.css 
/* app.css — retheme everything, or scope it to a section */
:root {
  --graph-accent: oklch(0.72 0.19 42);
  --graph-accent-2: oklch(0.75 0.12 250);
  --graph-accent-3: oklch(0.8 0.1 140);
}

/* any container works too */
.prose {
  --graph-accent: oklch(0.78 0.17 155);
}

Palette and glyphs

Drawing graphs take a palette: mono (the default), duo, or multi, mapped onto the accent variables above. Most also take glyphs: a preset (shade, ascii, hash, bar) or an array of characters, one per step. Table, Invoice, Spec, Stat, Tree, and the Frame stay plain. Operate the grammar →