Diagram Templates

These are reusable D2 starting points for the three most common Brainforge diagram shapes:

  • system-flow-template.d2
  • process-flow-template.d2
  • timeline-template.d2

Render the folder with:

npm run diagrams:render -- knowledge/engineering/diagram-templates

Generate preview PNGs for visual inspection:

npm run diagrams:preview -- knowledge/engineering/diagram-templates

System Flow

Use when you need to show products, services, data stores, or integrations.

System flow template

Process Flow

Use when you need to show sequential steps, decisions, and handoffs.

Process flow template

Timeline

Use when you need to show phases, milestones, or staged delivery.

Timeline template

How To Use

  1. Copy the closest template into the target folder.
  2. Rename it for the actual topic.
  3. Replace placeholder labels with the real system, process, or phases.
  4. Run the render command.
  5. If the output needs Brainforge polish, refine the published SVG separately.