System Design Diagrams Guide

Visualisation Diagram: Components & Design Conventions

Mockup style sketches, UI elements (text boxes, drop-downs, icons), annotations, typography details, and corporate branding.

Visualisation Diagram: Appropriate Use

Early planning and design phases to sketch concepts, prototype visual layouts, and conduct client reviews before coding.

Visualisation Diagram: Creation Process

Gather requirements, sketch rough layouts, identify UI elements, use digital tools like Figma/Sketch, and add labels and interactions.

Visualisation Diagram: Effectiveness

Provides clarity, visual focus, realistic component sizing/spacing, and demonstrates navigation between screens.

Visualisation Diagram: Optimisation

Create multiple responsive views, use strategic color schemes for interactive hotspots, and maintain standard UI conventions.

Wireframe Diagram: Components & Design Conventions

Strict grayscale palettes, placeholder boxes with 'X' for images, Lorem Ipsum text, simplified outlines, and input symbols.

Wireframe Diagram: Appropriate Use

Function-first design mapping, user interaction pathways, navigation loops, and structural page layouts detached from branding.

Wireframe Diagram: Creation Process

Define screen/feature, sketch basic layout with rectangles, add simplified UI, use dummy text, and create several wireframe states.

Wireframe Diagram: Effectiveness

Shows layout simply without distractions, features a function-first design with clear hierarchy and logical structure.

Wireframe Diagram: Optimisation

Enforce realistic proportions, depict dynamic multi-state changes, and pair wireframes with flowcharts or navigation maps.

Flowchart: Components & Design Conventions

ISO shapes: Ovals (Terminator), Rectangles (Process), Diamonds (Decisions), Parallelograms (Input/Output), and Arrows.

Flowchart: Appropriate Use

Planning user interaction steps, algorithmic navigation logic, branching system behaviors, and explaining paths to non-technical clients.

Flowchart: Creation Process

Define the algorithm, identify steps, use standard symbols top-to-bottom/left-to-right, add arrows, and test logic.

Flowchart: Effectiveness

Clear structure, logical flow, included actions/choices with True/False paths, and a readable layout without messy branches.

Flowchart: Optimisation

Avoid crossing lines, modularize large architectures into sub-flowcharts, and run dry-run trace tests with users.

Data Flow Diagram (DFD): Components & Design Conventions

Squares (Entities), Circles (Processes), Open Rectangles (Data Stores), and Arrows. Never displays loops or decision logic.

Data Flow Diagram (DFD): Appropriate Use

System analysis and data boundary definition; Level 0 for high-level management view, Level 1 for developer/analyst breakdowns.

Data Flow Diagram (DFD): Creation Process

Identify entities and main processes, determine data flows, draw a Level 0 DFD, and expand into detailed Level 1 DFDs.

Data Flow Diagram (DFD): Effectiveness

Easy to read with consistent symbols, shows realistic data movement, and matches audience understanding with correct detail levels.

Data Flow Diagram (DFD): Optimisation

Establish strict naming conventions, separate complex pathways across functional tiers, and pair with technical text explanations.