mdbin
Documentation menu

FreeDraw diagrams render as hand-drawn flowcharts right inside your Markdown. FreeDraw is a free diagramming tool at freedraw.dev — design a diagram visually there, export it as text, and paste it into mdbin. You can also write the diagram code by hand.

Designing on freedraw.dev

freedraw.dev is a free, browser-based canvas for hand-drawn diagrams. To embed one here:

  1. Open freedraw.dev and draw your flowchart.
  2. Open its Diagram code panel and copy the exported text.
  3. Paste that text into a ```freedraw block in your document.

Export and import are intentionally lossy — the text captures the flowchart's structure (nodes, shapes, edges, labels), not the exact canvas. Not every drawing feature is supported for export/import; see What gets exported below.

Embedding a diagram

Open a fence with freedraw, paste the code, and close it:

```freedraw
flowchart TD
A[Start] --> B{Ready?}
B -->|yes| C[Ship]
B -->|no| A
```

Which renders as:

Click a diagram to open a larger, zoomable view.

Sketchy style

Add sketchy after freedraw for a rougher, hand-drawn look with a handwritten font:

The diagram schema

A diagram is a flowchart header with a direction, then one statement per line — each statement is either a node or an edge. Lines starting with %% are comments.

Direction

Begin with flowchart (or graph) and a direction:

  • TD / TB — top to bottom
  • BT — bottom to top
  • LR — left to right
  • RL — right to left

Layout is automatic. Use LR for pipelines and wide fan-outs, TD for hierarchies and decisions.

Node shapes

A node is an id with an optional bracketed label; the bracket style selects the shape. Declare a node's label once, then reference it by id afterwards.

Syntax Shape
A[Text] rectangle
A(Text) rounded rectangle
A((Text)) ellipse
A{Text} diamond
A{{Text}} hexagon
A[/Text/] parallelogram
A[(Text)] cylinder
A>Text] triangle

Edges

Connect nodes with an edge operator, optionally carrying a |label|:

Syntax Line Arrowhead
A --> B solid arrow
A --- B solid none
A -.-> B dotted arrow
A ==> B thick arrow
A --o B solid circle
A --x B solid cross
A <--> B solid both ends

Chain several nodes on one line — each adjacent pair becomes its own edge:

What gets exported

Exporting from freedraw.dev (canvas → code) keeps the flowchart's structure but drops the purely visual details:

  • Exact positions, sizes, rotation, colours, opacity and fonts are not stored — re-importing lays the diagram out fresh.
  • Elements with no text equivalent are skipped: freehand drawings, images, sticky notes, plain text elements, and arrows that aren't bound to two nodes.

So an embedded diagram comes out tidy and consistently laid out, but won't reproduce a freehand sketch pixel-for-pixel. For diagrams you intend to embed, stick to nodes, edges, and labels.

Limits

  • Up to 25 diagrams per document, each up to 10,000 characters of code.
  • Diagrams render lazily as they scroll into view and follow the page's light/dark theme.