Diagram Templates

Twelve ready-made diagrams, rendered here exactly as the framework draws them

DiagramTemplates.All exposes twelve template factories that return a DiagramDto; load one with DrawingManager.LoadTemplate(dto) and it materializes on the canvas with connections intact. The editor sample lists them in the Templates menu.

Loading a template

using Beep.Skia;

if (DiagramTemplates.All.TryGetValue("ERD - E-commerce schema", out var factory))
{
    drawingManager.LoadTemplate(factory());
    drawingManager.RequestRedraw();
}

// Or enumerate them for a menu
foreach (var name in DiagramTemplates.All.Keys)
    Console.WriteLine(name);

Gallery

Flowchart — Order validation

Family: Flowchart · 7 nodes · start, process, decision, two outcomes

Flowchart template: order validation with a decision branch

The canonical flow: receive the order, validate it, branch on validity, then process payment and ship, or notify the customer. Good starting point for the flowchart tutorial.

Flowchart — Purchase approval

Family: Flowchart · approval flow with a rejection path

Flowchart template: purchase approval with approval and rejection paths

ERD — E-commerce schema

Family: ERD · Customers, Orders, Products, OrderItems with foreign keys and crow's-foot markers

ERD template: e-commerce schema with four entities and foreign key relationships

Shows row-level connections (the ports sit on individual columns), relationship labels and multiplicity markers. Export it with the DDL exporter.

ETL — Data warehouse pipeline

Family: ETL · source, transforms, destination

ETL template: a data warehouse pipeline from source through transforms to target

Extend it with lookups, SCD and profiling as in the ETL tutorial.

DFD — Order system (level 0)

Family: DFD · processes, data stores, external entities

DFD template: level 0 order system with processes, stores and external entities

UML — Class diagram

Family: UML · classes with attributes, operations and relationships

UML template: class diagram with attributes, operations and relationships

Export it to XMI as in the UML tutorial.

Network — Social graph

Family: Network · weighted nodes and links

Network template: a social graph with weighted links

Mind map — Product strategy

Family: Mind map · central topic with branches and sub-topics

Mind map template: product strategy with topics and sub-topics

Business process — Purchase approval

Family: Business process · events, tasks, gateway

Business process template: purchase approval with events, tasks and a gateway

Round-trips through BPMN XML — see the BPMN tutorial.

Project management — Sprint plan

Family: Project management · tasks and milestones

Project management template: sprint plan with tasks and milestones

Compute the critical path and add a Gantt timeline as in the PM tutorial.

State machine — Login process

Family: State machine · states with transitions

State machine template: login process with states and transitions

State machine — Order lifecycle

Family: State machine · guarded transitions

State machine template: order lifecycle with guarded transitions

Add triggers, guards and actions as in the state machine tutorial.

Regenerating these images

Every image on this page was produced by the framework itself, not by a drawing tool. The generator lives in the test suite and is opt-in:

$env:BEEP_SKIA_GENERATE_DOC_IMAGES=1
dotnet test Beep.Skia.Tests/Beep.Skia.Tests.csproj --filter DocumentationImageGenerator

It writes Help/assets/templates/*.png (and the family grids under Help/assets/families/) by loading each template into a DrawingManager and drawing it to a Skia surface.