Custom Flowcharts & Mind Maps: No JS Required

Gone are the days of heavy JavaScript libraries for simple diagrams. We’ve introduced two new components to help you visualize your ideas with that signature “hand-drawn” feel.

1. Flowcharts

Visualizing processes has never been easier. Our <Flowchart /> component takes a simple array of steps and renders them responsively.

A Linear Process

Perfect for roadmaps or simple sequences.

A Vertical Flow

Better for step-by-step tutorials.

How to Use

<Flowchart 
  steps={[
    { id: '1', label: 'Start', type: 'start' },
    { id: '2', label: 'Step 1', type: 'process' }
  ]}
/>

---

2. Mind Maps

Organize your thoughts hierarchically. The <MindMap /> component uses a recursive structure to render trees of any depth.

Project Structure (Example)

How to Use

Simply pass a nested object to the data prop.

<MindMap 
  data={{
    label: "Root",
    children: [
      { label: "Child 1" },
      { label: "Child 2" } // Add more nesting here
    ]
  }}
/>

Why CSS-Only?

1. Performance: Zero JavaScript overhead for rendering.
2. SEO Friendly: Content is just HTML list items.
3. Customizable: Pure CSS easy to style with our theme variables.

Enjoy mapping your mind!