Sketching with Code: Hand-Drawn Diagrams
Our “Active Whiteboard” design isn’t just for boxes and text—it extends to our diagrams too! By combining Mermaid.js with some CSS magic and the Kalam font, we turn rigid technical charts into friendly, hand-drawn sketches.
Here is how you can create beautiful, colorful diagrams that fit right into this aesthetic.
1. The “Sketchy” Flowchart
We can use Mermaid’s styling syntax to add splashes of color to our nodes, making them pop like sticky notes.
graph TD
style A fill:#ff9,stroke:#333,stroke-width:2px
...2. Colorful Sequence Diagram
Sequence diagrams are great for showing interactions. Our global theme automatically handles the colors, but you can still highlight specific participants.
3. Mindmap for Brainstorming
Mindmaps look exceptionally good with the hand-drawn font.
4. Dark Mode Adaptation
Try toggling the theme button in the top right!
Our Mermaid configuration listens to the site’s theme.
- Light Mode: Uses white/paper backgrounds and dark ink.
- Dark Mode: Switches to dark backgrounds with light chalk-like lines.
This ensures your diagrams are always readable and beautiful, no matter the user’s preference.
