Recipe to flowchart

Introduction

Building on the idea that recipes should be flowcharts, this post explores how to convert traditional text-based recipes into clear, visual flowcharts. Using D3.js, a node network is generated from a recipe. The process steps and ingredients are draggable for flexibility and clarity.

Fill in your recipe in the text box and click Generate Flowchart. Two example recipes are added below to showcase the recipe syntax and a possible final image (lightmode only) after (re)organizing the flowchart. Feel free to copy the recipes in the recipe text box to see what happens.

After generating the initial recipe flowchart. You can drag around the nodes to obtain a logical order and to avoid overlaps of links between nodes. This process requires some artistic input from the user (for now …). The flowchart adapts to light/dark mode, but was designed for light mode first. A button to switch between light and dark is added for convenience.

Quick tips for getting started:

The recipe syntax is designed to be close to natural language, with some caveats:

• Keep ingredients and processes separate. All ingredients are added using Add <ingredient>. This ensures ingredients are visible at a glance in the flowchart and maintains consistency.
• If ingredients and amounts overlap, feel free to adjust the width of the ingredient box. Keep in mind that the consistency between your recipes will be lost.
• Don’t forget to add cookware to the processes using <process> in <cookware>, as doing so benefits the visual flow of the recipe.
• Ingredient and process nodes can be further clarified using (<clarification>), e.g.:
  • Add Salt (quiet) {5 g},
  • Stir (reckless) in Casserole.

Recipe generator

Recipe syntax

Let’s start with some examples based on the recipes from the previous post on the topic. They showcase the current capabilities of the flowchart generator.

An LLM-initiated (Claude Sonnet 4.5) specification is added below the examples to facilitate writing new recipes.

The generated images are not optimized for dark mode as the exporter (currently) only supports light mode exporting for printing purposes.

Examples

Flemish beef stew

---
Title: Flemish Stew
Author: Thomas
Date: 2025
Comment: Based on Jeroen Meus
---

Subprocess Grill {
    Add meat {1 kg}
    Grill (in butter) in Braising pan
    Out meat
    Add Beer {2 bottles}
    Cook in Braising pan
    Out sauce
}

Subprocess Bread {
    Add Bread {1 slice}
    Add Mustard {2 Tb.}
    Smear
    Out .
}

Add Onion {2}
Chop
Sauté (in butter) in Casserole
Add meat from Grill
Add sauce from Grill
Add Laurel
Add Thyme
Add Cloves {1}
Add Sirup {1 Tb.}
Add . from Bread
Simmer (on low heat) in Casserole
Add Vinegar
Serve

Brussels Wafels

---
Title: Brussels wafels
Author: Thomas
Date: 2025
Comment: Based on Jeroen Meus
---

Subprocess A {
    Add egg {1}
    Separate
    Out White
    Out Yolk
}

Subprocess B {
    Add White from A
    Beat It (1983) in Mixing bowl 2
    Out .
}

Subprocess C {
    Add Butter {50 g}
    Melt
    Out .
}

Add Yolk from A
Add Yeast {6 g}
Add Milk {125 g}
Add Water {125 g}
Mix in Mixing bowl 1
Add Flour {150 g}
Add . from C
Add Salt {a pinch}
Mix in Mixing bowl 1
Add . from B
Mix (Carefully) in Mixing bowl 1
Bake
Serve

Internationalization

It is possible to change the title blocks to reflect the recipe language by including a settings block to the top of the file. Below is an example for the dutch version of the Brusselse wafels recipe.

---
Title: Brusselse wafels
Author: Thomas
Date: 2025
Comment: Gebaseerd op Jeroen Meus
Ingredients: Ingrediënten
Instructions: Instructies
---

Subprocess A {
    Add Ei {1}
    Scheid
    Out Wit
    Out Geel
}

Subprocess B {
    Add Wit from A
    Klop op in Mengkom 2
    Out .
}

Subprocess C {
    Add Boter {50 g}
    Smelt
    Out .
}

Add Geel from A
Add Gist {6 g}
Add Melk {125 g}
Add Water {125 g}
Meng in Mengkom 1
Add Bloem {150 g}
Add . from C
Add Zout {een snuifje}
Meng in Mengkom 1
Add . from B
Meng (voorzichtig) in Mengkom 1
Bak
Smakelijk

Language Specifiaction

Basic Syntax

Ingredients

Add ingredients using the Add keyword:

Add <ingredient name> (<clarification>) {<amount>}

• ingredient name: The name of the ingredient (required)
• clarification: Optional details in parentheses (e.g., how to add)
• amount: Optional quantity in curly braces

Examples:

Add Egg {1}
Add Butter {50 g}
Add Salt {a pinch}
Add Milk {125 g}

Process Steps

Any line that doesn’t start with Add, Subprocess, or Out is treated as a process step:

<action> (<clarification>) in <cookware>

• action: The cooking action (e.g., Mix, Beat, Melt, Chop)
• clarification: Optional details in parentheses (e.g., time, temperature, technique)
• cookware: Optional cookware specification using in <name>

Examples:

Mix
Whisk
Beat in Mixing bowl 2
Simmer (on low heat) in Casserole
Grill (in butter) in Braising pan

Output

Mark the final output using the Out keyword:

Out
Out <label>

• Without a label, defaults to “Serve”
• With a label, uses the specified text as the output node
• If the Out keyword is not specified, the last line is taken as the output

Examples:

Out
Out Serve
Serve

Advanced Features

Subprocesses

Define reusable subprocesses that can run in parallel:

Subprocess <Name> {
    <steps>
    Out <output name>
}

• Name: Unique identifier for the subprocess
• output name: Name to reference this output (use . for default output)
• Multiple outputs can be defined with different names

Example:

Subprocess A {
    Add Egg {1}
    Separate
    Out White
    Out Yolk
}

Referencing Subprocess Outputs

Use subprocess outputs in the main recipe or other subprocesses:

Add <output name> from <Subprocess Name>

Examples:

Add White from A
Add Yolk from A
Add . from C

The . refers to the last (or only) unnamed output of a subprocess.

Front Matter (Optional)

Add information or customize section titles using YAML-style front matter:

---
Title: <title>
Author: <author>
Date: <date>
Comment: <comment>
Ingredients: <custom title>
Instructions: <custom title>
...
---

Example:

---
Title: Brusselse wafels
Author: Thomas Van Riel
Date: 2025
Comment: Based on Jeroen Meus
Ingredients: Ingrediënten
Instructions: Instructies
---

This is useful for localization or custom branding. The front matter can also be used to include other information (e.g. the date, author)

Comments

Add comments to your recipes using //:

Add Eggs {2}  // Use room temperature eggs
Whisk  // Beat until frothy
// This entire line is a comment
Heat pan

• Inline comments: Text after // on any line is ignored
• Full-line comments: Lines starting with // are completely ignored
• Use for: Notes, clarifications, or temporary disabling of recipe steps

Complete Examples

Simple Recipe (No Subprocesses)

Add Eggs {2}
Add Butter
Add Salt
Add Pepper
Crack eggs
Whisk
Heat pan
Melt butter
Pour eggs
Scramble (2 min)
Season
Out

Recipe with Subprocesses

Subprocess A {
    Add Egg {1}
    Separate
    Out White
    Out Yolk
}

Subprocess B {
    Add White from A
    Beat in Mixing bowl 2
    Out .
}

Add Yolk from A
Add Yeast {6 g}
Add Milk {125 g}
Mix in Mixing bowl 1
Add . from B
Mix (Carefully) in Mixing bowl 1
Bake
Out Serve

With Localization

---
Ingredients: Ingrediënten
Instructions: Instructies
---

Subprocess A {
    Add Ei {1}
    Scheid
    Out Wit
    Out Geel
}

Add Geel from A
Add Gist {6 g}
Meng in Mengkom 1
Bak
Smakelijk

Visualization Features

When rendered as a flowchart:

• Ingredients appear as small nodes
• Process steps appear as rectangular nodes
• Cookware (specified with in <name>) creates colored background regions (10 different colors are defined)
• Output appears as a filled node at the bottom
• Arrows show the flow between steps

Tips

1. Order matters: Steps are executed in the order they appear
2. Parallel processing: Use subprocesses for steps that can happen simultaneously
3. Cookware tracking: Include in <cookware> to visually group related steps
4. Clarity: Use clarifications (in parentheses) for timing, temperature, or technique details
5. Amounts: Always specify amounts in curly braces for ingredient tracking

Parser Behavior

• Blank lines are ignored
• Comments (text after //) are stripped before parsing
• Ingredients added from subprocesses are not duplicated in the ingredient list
• The last process step in the main recipe is treated as the output if no Out statement is present
• Subprocess outputs marked with . use the last process node in that subprocess
• All ingredients from Add statements (not from subprocesses) are alphabetically sorted in the ingredient list