Skip to content
Kadal Deck docs

Maths, diagrams and sketches

Maths

Section titled “Maths”
Inline: $e^{i\pi} + 1 = 0$


$$
\int_0^1 x^2\,dx = \tfrac{1}{3}
$$


<Tex tex="\sum_{k=1}^{n} k = \frac{n(n+1)}{2}" />

Maths is rendered with KaTeX at build time.

Mermaid

Section titled “Mermaid”
<Mermaid>{`flowchart LR
  write --> present --> publish`}</Mermaid>

Sketches: Excalidraw on a slide

Section titled “Sketches: Excalidraw on a slide”

<Sketch> puts an Excalidraw drawing on a slide — the hand-drawn look, in the deck’s colours. Three ways in:

// src/sketches.ts — drawn in code with the DSL (plain data; Excalidraw loads only when a sketch renders)
import { sketch } from "@kadal/deck/sketch";


const s = sketch({ width: 1280, height: 600 });
s.region("edge", { x: 440, y: 20, w: 420, h: 560, title: "Cloudflare Workers", tone: "accent" });
s.node("w", {
  x: 470,
  y: 70,
  w: 360,
  h: 96,
  label: "Worker\nSSR + API",
  tone: "accent",
  region: "edge",
});
s.node("d1", {
  x: 470,
  y: 472,
  w: 160,
  h: 88,
  shape: "cylinder",
  label: "D1",
  tone: "pink",
  region: "edge",
});
s.arrow("w", "d1", { label: "only what is needed" });
export const architecture = s.build();
<Sketch
  scene={architecture}
  steps={["edge", { focus: "edge", caption: "…" }, null]}
  height="660px"
/>
<Sketch src="diagrams/flow.excalidraw" /> {/* saved on excalidraw.com, in public/ */}
<Sketch>{`flowchart LR; a --> b`}</Sketch> {/* Mermaid, converted to Excalidraw */}
  • Nodes: box, pill, ellipse, diamond, cylinder, note, text; tones as for the bling components plus ink and muted; fill: hachure, dashed, font: hand | normal | code.
  • Arrows pick the facing sides themselves (from, to, fromShift and via steer them), take a label, and belong to the regions of both ends.
  • Tours: steps shows the whole drawing first, then one click per entry lights a region and dims the rest, with a caption; the notes’ [click] markers line up with them.
  • Converted Mermaid: flowchart, sequence, class, state and ER diagrams.
  • Frames and groups in a saved .excalidraw file become regions.

The corner button (and its f hint) opens the real Excalidraw canvas in view mode to pan and zoom. Colours are rewritten to theme tokens on export, so a sketch follows the theme menu and the dark scheme; Excalidraw’s fonts are self-hosted by the Vite plugin under <base>excalidraw/fonts/, so a sketch never reaches a font CDN.