# Process flow diagram
## MicroSim spec
- **Recommended sim type:** network/graph
- **Microsimmability score:** 72/100
- **Layout:** drawing region (canvas) on top; control region (sliders/buttons) below.
### Parameters (tunable controls)
- `Number of unit blocks - 2 to 10`
- `Stream flow rate - 0 to 100 %`
- `Recycle on/off`
### What animates
Equipment blocks and connecting stream arrows are laid out and animated with flow as blocks are added and a recycle stream is toggled, with stream tags updating.
### Learning objective
Read how equipment and streams compose into a documented process arrangement.
## Links (Wikipedia order)
<!-- injected from _registry/childlinks/Process_flow_diagram.json (2026-07-30T02:09:12Z) -->
[[Chemical_engineering]] · [[Density]] · `Flange` · `International_Organization_for_Standardization` · `Mass_balance` · `Mass_flow_rate` · `Oil_refinery` · `Open-source_software` · `Piping` · `Piping_and_instrumentation_diagram` · `Pressure` · [[Process_design]] · [[Process_engineering]] · `Relief_valve` · `Safety_valve` · `Temperature` · `Unit_process` · `United_States_Patent_and_Trademark_Office` · `Valve`
> p5.js MicroSim stub · part of Process Engineering · [Wikipedia source](https://en.wikipedia.org/wiki/Process_flow_diagram)
> Relation: subfield of process engineering.
## Concept summary
A process flow diagram is the standardized schematic of major equipment, streams, and flow direction that documents how a process is arranged.
## Build checklist
- [ ] Claim it: set `status: in-progress` + `lease` + `leased_at`
- [ ] Write the child page explaining the concept (tie it back to process engineering)
- [ ] Finalize parameter ranges and defaults
- [ ] Implement the p5.js sketch (drawing + control regions)
- [ ] Add caption + the learning objective on the page
- [ ] Set `status: done`
## p5.js sketch
```javascript
// MicroSim: Process flow diagram
let controls = {};
function setup() {
// createCanvas(...); create sliders for the parameters above.
}
function draw() {
// background(...); read controls; render network/graph; respond live.
}
```
---
Back to Process Engineering · Wikipedia: [Process flow diagram](https://en.wikipedia.org/wiki/Process_flow_diagram)
---
<!-- SEMIOTIC-PROFILE:START -->
## Semiotic profile
> *The semiotic universals this article invokes, machine-derived from the crossref — **unverified** (born so). Populated 2026-07-06 for the Systems room.*
**Universals (3):** 🟢 flow (7) · 🟢 network (6) · 🟢 circuit symbols iec (2)
**Enter by sign:** Systems Semiotic Gateway · Alphabetum · Icon Registry · ← Systems Portal
<!-- SEMIOTIC-PROFILE:END -->
## Wikipedia : Wikitube
**Strict pair:** [Wikipedia](https://en.wikipedia.org/wiki/Process_flow_diagram) : [Wikitube](https://en.wikitube.io/wiki/Process_flow_diagram)
## Previous hub tags
Tree parent: [[Monte_Carlo_method]].
Legacy hubs: none.
---
*Sources: 1 legacy note. Minted wave 1, 2026-07-30 (v1.6 order).*