Skip to main content

Diagram Guidelines

We use custom React components rendering SVG elements for complex state diagrams. This ensures diagrams are accessible, responsive, and easy to translate or update without needing external design tools.

Example output​

Applicable for fixed depositsApplicable for products with overdraftCreate deposit accountCreate deposit account in approved state (API only)Reject accountWithdrawMake depositUndo activate (no transaction on the account)Make a withdrawal (take the account into overdraft)WithdrawLock / Unlock accountStart maturity periodClosedDormancy is activatedMake deposit/ withdrawal / transferLock / Unlock accountClose accountClose accountReopen accountLock / Unlock accountLate payment for the overdraftOverdraft late paymentWrite offWrite off the negative balanceCreate deposit accountPending approvalApproveActiveLockedMaturedDormantIn ArrearsClosedRejectedClosedWithdrawnClosedMaturedClosedWritten offClosedClosedEdit account

Implementation Details​

Diagrams should be placed in src/components/diagrams and imported into MDX files.

Create a new diagram​

To create a new diagram, you can copy one of the existing files at src/components/diagrams into a new .js file. You can also copy the contents into an LLM such as Gemini and ask it to follow the same principles of design to create the new diagram, providing it with this information as a guideline.

tip

The LLM can create an HTML version of the diagram for faster iteration. You can copy the contents into a .html file and open it in a browser to preview the output.

Import the diagram into an MDX file​

To add the diagram, use the following syntax:

import DepositLifeCycleDiagram from '@site/src/components/diagrams/DepositLifeCycleDiagram'; //this can be placed at the top of the file, or just before the declaration

<DepositLifeCycleDiagram />

1. File structure​

Create your component in src/components/diagrams/<DiagramName>.js.

2. Design system colors​

Use the following color palette to ensure consistency across lifecycle diagrams:

State TypeFill ColorStroke ColorText Color
Start Node#9fc5e8 (Blue)#3d85c6Black
Active State#6aa84f (Green)#38761dWhite (Bold)
Closed Header#5000be (Purple)#5000beWhite (Bold)
Closed Body#fffebb (Yellow)#5000beBlack
Lines/ArrowsN/A#000000Black

3. Geometry & routing​

  • Technique: Use SVG <path> elements with Quadratic Bezier curves (Q).
  • Directionality: Avoid straight lines crossing over nodes. Use curvature (curvature prop in our helper) to arc lines around obstacles.
  • Overlaps: When lines must cross, ensure one arcs significantly higher or lower (Z-axis visual separation) or change the routing side.
  • Labels: Labels should be rendered on top of lines with a semi-transparent white background (opacity="0.95") to ensure readability.

4. Component template​

Use the CurvedArrow and BiDirectionalArrow helper components defined in the diagram files to handle the math for bezier curves automatically.