Mermaid Prompt

# Mermaid Diagrams

## Diagram Requirements

- Add titles where supported (sequence diagrams, gantt charts, etc.)
- For flowcharts, use descriptive markdown headings above the diagram
- Use the examples below as what good looks like

## Brand Color Compliance

All Mermaid theme colors must come from the official [Rixxo Brand Colours](../rixxo-colours.md) palette:

## Flowchart Example

```mermaid
%%{init: {
  'theme': 'base',
  'themeVariables': {
    'background': '#ffffff',
    'primaryColor': '#fdf8f8',
    'primaryTextColor': '#1a2f37',
    'primaryBorderColor': '#1a2f37',
    'secondaryColor': '#f5f0f0',
    'secondaryTextColor': '#1a2f37',
    'secondaryBorderColor': '#33CC99',
    'tertiaryColor': '#AFEAD6',
    'tertiaryTextColor': '#1a2f37',
    'tertiaryBorderColor': '#218262',
    'lineColor': '#56E2AF',
    'textColor': '#1a2f37',
    'mainBkg': '#fdf8f8',
    'secondBkg': '#f5f0f0',
    'tertiaryBkg': '#AFEAD6',
    'clusterBkg': '#D6EBF5',
    'clusterBorder': '#89C4E1',
    'defaultLinkColor': '#56E2AF',
    'titleColor': '#1a2f37',
    'edgeLabelBackground': '#ffffff',
    'fontFamily': 'trebuchet ms, verdana, arial',
    'fontSize': '14px'
  }
}}%%

graph TD
  A[Project Start] -->|Planning| B(Requirements Gathering)
  B --> C{Platform Selection}
  B --> G[/Stakeholder Review/]
  C ==>|B2B Focus| D[Implementation Plan]
  C -->|Custom Build| E[Development Sprint]
  C -->|Integration| F[System Architecture]
  subgraph "Rixxo Process"
    C
    D
    E
    F
    G
  end

Rixxo Mermaid Theme Variables

Variable	Rixxo Value	Mermaid Default	Description
`darkMode`	`false`	`false`	Affects how derived colors are calculated. Set value to true for dark mode.
`background`	`#ffffff`	`#f4f4f4`	Used to calculate color for items that should either be background colored or contrasting to the background
`fontFamily`	`trebuchet ms, verdana, arial`	`trebuchet ms, verdana, arial`	Font family for diagram text
`fontSize`	`14px`	`16px`	Font size in pixels
`primaryColor`	`#fdf8f8`	`#fff4dd`	Color to be used as background in nodes, other colors will be derived from this
`primaryTextColor`	`#1a2f37`	calculated from darkMode	Color to be used as text color in nodes using primaryColor
`primaryBorderColor`	`#1a2f37`	calculated from primaryColor	Color to be used as border in nodes using primaryColor
`secondaryColor`	`#f5f0f0`	calculated from primaryColor	Background color for secondary nodes
`secondaryTextColor`	`#1a2f37`	calculated from secondaryColor	Color to be used as text color in nodes using secondaryColor
`secondaryBorderColor`	`#33CC99`	calculated from secondaryColor	Color to be used as border in nodes using secondaryColor
`tertiaryColor`	`#AFEAD6`	calculated from primaryColor	Background color for tertiary nodes
`tertiaryTextColor`	`#1a2f37`	calculated from tertiaryColor	Color to be used as text color in nodes using tertiaryColor
`tertiaryBorderColor`	`#218262`	calculated from tertiaryColor	Color to be used as border in nodes using tertiaryColor
`lineColor`	`#56E2AF`	calculated from background	Color for connecting lines between nodes
`textColor`	`#1a2f37`	calculated from primaryTextColor	Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram
`mainBkg`	`#fdf8f8`	calculated from primaryColor	Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc
`defaultLinkColor`	`#56E2AF`	calculated from lineColor	Default color for links/arrows
`titleColor`	`#1a2f37`	calculated from textColor	Color for diagram titles
`clusterBkg`	`#D6EBF5`	calculated from secondaryColor	Background color for subgraphs/clusters
`clusterBorder`	`#89C4E1`	calculated from clusterBkg	Border color for subgraphs/clusters
`edgeLabelBackground`	`#ffffff`	calculated from background	Background color for edge labels

Architecture Diagram Variables

Variable	Rixxo Value	Description
All base variables	Same as flowchart	Architecture diagrams use the same base theme variables
Group styling	`clusterBkg`, `clusterBorder`	Groups use cluster styling variables
Service styling	`mainBkg`, `primaryBorderColor`	Services use main background and border colors

Brand Color References

Text Primary: #1a2f37 (Light mode text)
Green Primary: #33CC99 (Rixxo brand green)
Green Darker: #218262 (Darker green variant)
Green Tint: #56E2AF (Lighter green variant)
Blue Tint: #89C4E1 (Light blue variant)
Blue Light Tint: #D6EBF5 (Very light blue variant)
Light Mode Backgrounds: #fdf8f8, #f5f0f0, #AFEAD6

Sequence Diagram Example

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'background': '#ffffff',
    'primaryColor': '#fdf8f8',
    'primaryTextColor': '#1a2f37',
    'primaryBorderColor': '#1a2f37',
    'secondaryColor': '#f5f0f0',
    'secondaryTextColor': '#1a2f37',
    'secondaryBorderColor': '#33CC99',
    'tertiaryColor': '#AFEAD6',
    'tertiaryTextColor': '#1a2f37',
    'tertiaryBorderColor': '#218262',
    'lineColor': '#56E2AF',
    'textColor': '#1a2f37',
    'mainBkg': '#fdf8f8',
    'secondBkg': '#f5f0f0',
    'tertiaryBkg': '#AFEAD6',
    'clusterBkg': '#D6EBF5',
    'clusterBorder': '#89C4E1',
    'defaultLinkColor': '#56E2AF',
    'titleColor': '#1a2f37',
    'edgeLabelBackground': '#ffffff',
    'fontFamily': 'trebuchet ms, verdana, arial',
    'fontSize': '14px',
    'actorBkg': '#fdf8f8',
    'actorBorder': '#1a2f37',
    'actorTextColor': '#1a2f37',
    'actorLineColor': '#56E2AF',
    'signalColor': '#1a2f37',
    'signalTextColor': '#1a2f37',
    'labelBoxBkgColor': '#fdf8f8',
    'labelBoxBorderColor': '#1a2f37',
    'labelTextColor': '#1a2f37',
    'loopTextColor': '#1a2f37',
    'activationBorderColor': '#33CC99',
    'activationBkgColor': '#f5f0f0',
    'sequenceNumberColor': '#56E2AF',
    'noteBkgColor': '#AFEAD6',
    'noteTextColor': '#1a2f37',
    'noteBorderColor': '#218262'
  }
}}%%
sequenceDiagram
    title: Client Onboarding Process
    participant Client as Client
    participant PM as Project Manager
    participant Dev as Development Team
    participant QA as Quality Assurance
    
    Client->>PM: Initial Requirements
    PM->>Dev: Project Brief
    
    loop Implementation Cycle
        Dev->>Dev: Build Features
        Dev->>QA: Code Review
        QA-->>Dev: Feedback
    end
    
    Note right of QA: Testing ensures<br/>quality delivery
    
    QA->>PM: Testing Complete
    PM->>Client: Delivery Ready
    Client-->>PM: Approval & Sign-off

User Journey Example

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'background': '#ffffff',
    'primaryColor': '#fdf8f8',
    'primaryTextColor': '#1a2f37',
    'primaryBorderColor': '#1a2f37',
    'secondaryColor': '#f5f0f0',
    'secondaryTextColor': '#1a2f37',
    'secondaryBorderColor': '#33CC99',
    'tertiaryColor': '#AFEAD6',
    'tertiaryTextColor': '#1a2f37',
    'tertiaryBorderColor': '#218262',
    'lineColor': '#56E2AF',
    'textColor': '#1a2f37',
    'mainBkg': '#fdf8f8',
    'secondBkg': '#f5f0f0',
    'tertiaryBkg': '#AFEAD6',
    'clusterBkg': '#D6EBF5',
    'clusterBorder': '#89C4E1',
    'defaultLinkColor': '#56E2AF',
    'titleColor': '#1a2f37',
    'edgeLabelBackground': '#ffffff',
    'fontFamily': 'trebuchet ms, verdana, arial',
    'fontSize': '14px',
    'cScale0': '#fdf8f8',
    'cScale1': '#f5f0f0',
    'cScale2': '#AFEAD6',
    'cScale3': '#D6EBF5',
    'cScale4': '#89C4E1',
    'cScale5': '#33CC99',
    'cScale6': '#218262'
  }
}}%%
journey
    title: B2B Platform Selection Journey
    section Discovery
      Identify pain points: 3: Client
      Research solutions: 4: Client
      Contact Rixxo: 5: Client
    section Consultation
      Initial assessment: 5: Client, Rixxo
      Requirements gathering: 4: Client, Rixxo
      Platform recommendations: 5: Rixxo
    section Decision
      Review proposals: 4: Client
      Stakeholder alignment: 3: Client
      Final selection: 5: Client, Rixxo

Architecture Diagram Example

When drawing architecture diagrams:

Choose suitable icons for each service
Service name does not support any special chars
Services should use background color choices from Rixxo Colour Palette

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'background': '#ffffff',
    'primaryColor': '#fdf8f8',
    'primaryTextColor': '#1a2f37',
    'primaryBorderColor': '#1a2f37',
    'secondaryColor': '#f5f0f0',
    'secondaryTextColor': '#1a2f37',
    'secondaryBorderColor': '#33CC99',
    'tertiaryColor': '#AFEAD6',
    'tertiaryTextColor': '#1a2f37',
    'tertiaryBorderColor': '#218262',
    'lineColor': '#56E2AF',
    'textColor': '#1a2f37',
    'mainBkg': '#fdf8f8',
    'secondBkg': '#f5f0f0',
    'tertiaryBkg': '#AFEAD6',
    'clusterBkg': '#D6EBF5',
    'clusterBorder': '#89C4E1',
    'defaultLinkColor': '#56E2AF',
    'titleColor': '#1a2f37',
    'edgeLabelBackground': '#ffffff',
    'fontFamily': 'trebuchet ms, verdana, arial',
    'fontSize': '14px'
  }
}}%%
architecture-beta
    group api(cloud)[Rixxo Platform Architecture]

    service erp(database)[ERP] in api
    service website(server)[Website] in api
    service storage1(disk)[Storage DO Spaces] in api
    service storage2(disk)[Backup Storage] in api

    erp:L -- R:website
    storage1:T -- B:website
    storage2:T -- B:erp

Usage Guidelines

Theme Application

Copy the complete theme block from any example above
Paste at the start of your Mermaid diagram code
Modify only the diagram content - never change theme variables
Use descriptive titles where supported by the diagram type

Diagram-Specific Rules

Flowcharts:

Use markdown headings above diagrams (titles not supported)
Apply semantic naming for business processes
Use subgraphs to group related processes

Sequence Diagrams:

Always include a descriptive title
Use business-relevant participant names
Include meaningful interaction descriptions

User Journey Diagrams:

Include descriptive titles
Use realistic satisfaction scores (1-5)
Focus on client/customer perspectives

Architecture Diagrams:

Choose appropriate icons for each service type
Service names cannot contain special characters (use "ERP" not "ERP: Orderwise")
Use descriptive but simple names (e.g., "Storage DO Spaces" not "Storage: Digital Ocean Spaces")
Group related services logically

Quality Checklist

Before publishing any Mermaid diagram, verify:

[ ] Theme variables are applied and unchanged
[ ] All colors come from the official brand palette
[ ] Titles are included where supported
[ ] Content is business-relevant and professional
[ ] Naming follows Rixxo conventions
[ ] Diagram serves a clear documentation purpose