Rough.js Hand-Drawn Style Graphics

Rough.js renders graphics with a hand-drawn, sketchy appearance. The :::rough directive lets you define shapes via JSON configuration, and all colors automatically adapt to the current theme.

Basic Shapes

Rectangles, circles, ellipses, and lines — the fundamental building blocks of any drawing.

Each shape supports different fillStyle values: hachure (default), cross-hatch, zigzag, solid, and dots. The roughness parameter controls how sketchy the shape looks — higher values produce more hand-drawn effects.

Simple Flowchart

Rough.js shapes can be combined to create informal, hand-drawn diagrams that feel more approachable than rigid box-and-arrow charts.

Bar Chart Visualization

A hand-drawn bar chart comparing frontend framework popularity — demonstrating that Rough.js can convey data in a friendly, informal style.

The bars above use different fill styles to distinguish categories. In a real scenario you would add text labels — but even without them, the visual hierarchy is clear.

Configuration Reference

The :::rough directive accepts a config attribute — a JSON string with the following structure:

:::rough{config='{"width":400,"height":200,"shapes":[...]}'}

Shape Types

Shape Options

Each shape supports an options object:

• stroke — Stroke color (use var(--foreground) for theme-aware colors)
• fill — Fill color (use var(--accent) for theme accent)
• fillStyle — hachure, cross-hatch, zigzag, solid, dots
• roughness — Sketchiness level (0 = smooth, 3+ = very rough)
• strokeWidth — Stroke width in pixels