Flowchart diagram - accessible

///mermaid %%{init: { "theme": "base", "themeVariables": { "primaryColor": "#005eb8", // NHS Blue for flow boxes "edgeLabelBackground":"#ffffff", "nodeTextColor": "#000000", // NHS Black text "fontSize": "16px", "tertiaryColor": "#768692", // NHS mid-grey for alternate states "secondaryColor": "#007f3b" // NHS Green for decision outcomes } }}%% graph TD accTitle: Example flowchart accDescr: During Christmas, you receive money and decide to go shopping. As you consider your options, you reach a decision point where you think about what to buy. You have three choices: purchasing a laptop, buying an iPhone, or selecting an unspecified third option. This flowchart represents the simple decision-making process of spending money received during the holiday season. A[Christmas]-->|Get money| B(Go shopping) B-->C{Let me think} C-->|One| D[Laptop] C-->|Two| E[iPhone] C-->|Three| F

• Explain the example flowchart diagram
  During Christmas, you receive money and decide to go shopping. As you consider your options, you reach a decision point where you think about what to buy. You have three choices: purchasing a laptop, buying an iPhone, or selecting an unspecified third option. This flowchart represents the simple decision-making process of spending money received during the holiday season.

Mindmap - accessible when not paired with Sankey diagram due to duplicate ids (node-1)

///mermaid %%{init: { "theme": "base", "themeVariables": { "fontSize": "18px", "primaryColor": "#003087", "primaryTextColor": "#ffffff", "primaryBorderColor": "#003087", "secondaryColor": "#F0F4F5", "secondaryTextColor": "#212B32", "secondaryBorderColor": "#AEB7BD", "tertiaryColor": "#005EB8", "tertiaryTextColor": "#ffffff", "tertiaryBorderColor": "#005EB8", "nodeBorderRadius": 10 }, "mindmap": { "padding": 15, "maxNodeWidth": 300 } }%% mindmap root(NHS Number) (Costs to implement) (Benefits) (Cost savings) ::icon(fa fa-sterling-sign) (Progress) (Highly adopted) (95% of the NHS) (Used by) (ISB 0149-01 NHS Number for General Practice) ::icon(fa fa-book) (ISB 0149-02 NHS Number for Secondary care) ::icon(fa fa-book) (Related to) (ISB 0086 Information Governance Toolkit) ::icon(fa fa-book-open) (ISB 1512 Information Governance Standards Framework) ::icon(fa fa-book-open) (ISB 1572 Sensitive Data) ::icon(fa fa-book-open) (ISB 1077 AIDC for Patient Identification) ::icon(fa fa-book-open) (ISB 1555 NHS Number for Babies) ::icon(fa fa-book-open) (Care settings) (Community health) (GP / Primary care) (Acute) (Hospital) (Maternity) (Mental health) (Urgent and Emergency Care) (Legal obligations) (Mandatory) (for NHS providers) ::icon(fa fa-hospital) (Due to) (Section 250) ::icon(fa fa-scale-balanced) (About) (Access to records) (Appointment / scheduling) (Continuity of care) (Demographics) (Key care information) (Patient communication) (Referrals)

• Explain the NHS Number standard mindmap
  This diagram shows how the NHS Number is used across the health and care system to help keep your information safe, accurate, and easy to find. It explains that using the NHS Number is required by law for NHS services, and it’s already used by nearly all of them. It helps link your records when you go to different places for care—like your GP, hospital, or mental health services—so staff can see the right details about you. The diagram also shows how the NHS Number connects to other important rules and standards that protect your data and support good care. Overall, it helps make sure everyone involved in your care is on the same page.

Standards Directory Roadmap (2024 - 2026) Gantt chart - accessible

///mermaid %%{init: { "theme": "default", "displayMode:" "compact", "themeVariables": { "primaryColor": "#005eb8", // NHS Blue for bars "primaryTextColor": "#ffffff", // White text for contrast "primaryBorderColor": "#003a70", // Darker NHS Blue border "secondaryColor": "#007f3b", // NHS Green for optional bars "tertiaryColor": "#768692", // NHS Mid Grey for milestones "fontSize": "16px", "textColor": "#231f20", // NHS Black for general text "lineColor": "#231f20", // NHS Black for grid lines "background": "#f0f4f5" // NHS Pale Grey background } }}%% gantt accTitle: Standards Directory Roadmap (2025 - 2026) accDescr: This gantt chart shows work on the NHS Standards Directory from January 2025 to March 2026. Key documents were made more accessible, with full WCAG 2.2 compliance achieved by May 2025. title Standards Directory Roadmap (2024 - 2026) dateFormat YYYY-MM-DD tickinterval 12month section Project WCAG 2.2 accessible :done, q1_2025, 2025-01-01, 2025-05-15 GDS live certified:done, q1_2026, 2025-12-01, 2026-03-30 Business cases:done, q1_2026, 2025-10-01, 2026-03-30 section Content Open standards :done, q2_2025, 2025-05-01, 2025-06-30 ISO TC215 standards :done, q1_2025, 2025-01-01, 2025-05-30 Create taxonomy :done, q3_2025, 2025-07-01, 2025-08-30 Create ontology :done, q4_2025, 2025-09-01, 2025-10-31 Data elements :done, q2_2025, 2025-04-01, 2025-07-31 Glossaries :done, q2_2025, 2025-05-01, 2025-10-30 Simplify standards :done, q2_2025, 2025-03-01, 2025-05-30 Requirements/Benefits:done, q2_2025, 2025-05-01, 2025-09-30 section Capability Data model upgrade :done, q1_2025, 2025-01-01, 2025-05-01 Email notifications :done, q1_2025, 2025-01-01, 2025-06-30 Integrate taxonomies :done, q3_2025, 2025-06-01, 2025-09-01 Content Management System :done, q4_2025, 2025-09-01, 2026-01-30 Autocomplete search :done, q1_2025, 2025-01-01, 2025-01-31 Accessible diagrams :done, q1_2025, 2025-01-01, 2025-05-31 Accessible documents :done, q1_2025, 2025-01-01, 2025-06-30

• Explain the Standards Directory roadmap
  This chart shows the plan for improving the NHS Standards Directory from early 2025 to spring 2026. It starts with making documents easier to read and fully accessible by May 2025. During the year, important content like international and open standards was added, and the information was better organised using clear categories. Helpful features like search suggestions, email updates, and easier navigation were added throughout 2025. A system to manage content was put in place by early 2026. The project reaches a major milestone in March 2026 with official GDS live certification and completed business plans.

Pie chart - accessible

///mermaid %%{init: { "pie": { "textPosition": 0.5 }, "theme": "default", "themeVariables": { "pieOuterStrokeWidth": "2px", "pieStrokeColor": "#003087", // Dark NHS Blue border "pie1": "#005eb8", // NHS Blue "pie2": "#007f3b", // NHS Green "pie3": "#8a1538", // NHS Dark Red "pie4": "#330072", // NHS Purple (optional) "pie5": "#768692" // NHS Dark Grey (supporting) } }}%% pie showData accTitle: Example piechart accDescr: This pie chart shows the main elements found in a product, using both colours and labels to help you understand the amounts. Potassium is the largest part, making up 50.05% of the product. Calcium is next, at 42.96%. Magnesium is much smaller at 10.01%, and Iron is the smallest part at 5%. title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

Entity relationship diagram - accessible

///mermaid %%{init: { "theme": "default", "themeVariables": { "primaryColor": "#005eb8", // NHS Blue for entity background "primaryTextColor": "#ffffff", // White text for contrast "primaryBorderColor": "#003087", // Dark NHS Blue border "lineColor": "#330072", // Supporting Purple for relationships "fontSize": "14px" } }}%% erDiagram accTitle: Example entity relationship diagram accDescr: This diagram shows how different parts of an online shopping system are connected. It starts with the customer, who can place orders, receive invoices, and has one or more delivery addresses. Each delivery address can be linked to several orders. Every order includes order items, and each order item is linked to a product. Products belong to a product category, which helps group similar items together. An invoice is linked to the order it covers, and customers are responsible for their invoices. The diagram helps explain how customers, products, orders, and delivery information all work together in a shopping system. CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in"

• Explain the example Entity relationship diagram
  This diagram shows how different parts of an online shopping system are connected. It starts with the customer, who can place orders, receive invoices, and has one or more delivery addresses. Each delivery address can be linked to several orders. Every order includes order items, and each order item is linked to a product. Products belong to a product category, which helps group similar items together. An invoice is linked to the order it covers, and customers are responsible for their invoices. The diagram helps explain how customers, products, orders, and delivery information all work together in a shopping system.

Class diagram - accessible

///mermaid %%{init: { "theme": "default", "themeVariables": { "primaryColor": "#005eb8", // NHS Blue for node fill "primaryTextColor": "#ffffff", // White text for high contrast "primaryBorderColor": "#003087", // Darker NHS Blue border "lineColor": "#330072", // Supporting Purple for relationships "fontSize": "14px" } }}%% classDiagram accTitle: Example class diagram accDescr: This class diagram shows how different animals are grouped and what features they have. At the top is a general group called Animal, which includes all animals in the diagram. Every animal has an age (a number), a gender (a word), and two actions they can do: isMammal, which checks if the animal is a mammal, and mate, which means to have babies. There are three types of animals shown: Duck, Fish, and Zebra. Each one belongs to the Animal group but also has its own special features. Ducks have a beak colour and can swim and quack. Fish have a size in feet (which is private) and can eat. Zebras have a wild or not setting and can run. This diagram helps explain how animals can be sorted into a general group with shared traits, while still keeping their unique features. Animal <|-- Ducks Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

• Explain the example Class diagram
  This class diagram shows how different animals are grouped and what features they have. At the top is a general group called Animal, which includes all animals in the diagram. Every animal has an age (a number), a gender (a word), and two actions they can do: isMammal, which checks if the animal is a mammal, and mate, which means to have babies. There are three types of animals shown: Duck, Fish, and Zebra. Each one belongs to the Animal group but also has its own special features. Ducks have a beak colour and can swim and quack. Fish have a size in feet (which is private) and can eat. Zebras have a wild or not setting and can run. This diagram helps explain how animals can be sorted into a general group with shared traits, while still keeping their unique features.

Quadrant diagram - accessible

///mermaid %%{init: { "theme": "default", "themeVariables": { "quadrant1Fill": "#007f3b", // NHS Green – positive (We should expand) "quadrant2Fill": "#005eb8", // NHS Blue – strategic (Need to promote) "quadrant3Fill": "#8a1538", // NHS Dark Red – warning (Re-evaluate) "quadrant4Fill": "#768692", // NHS Dark Grey – neutral (May be improved) "textColor": "#ffffff", // High contrast white text "fontSize": "14px" } }}%% quadrantChart accTitle: Example quadrant diagram accDescr: This quadrant chart shows how six campaigns are performing based on two things: how many people saw them (reach) and how many interacted with them (engagement). Both scores range from 0 to 1, where 1 is the highest possible score, meaning the campaign reached or engaged with everyone in the target group. The chart is split into four areas to make it easier to understand. Campaign C (0.57 reach, 0.69 engagement) and Campaign F (0.35, 0.78) are in the top right, showing high reach and high engagement — these fall under “We should expand.” Campaign A (0.3, 0.6) has strong engagement but lower reach, so it’s in the “Need to promote” area. Campaign D (0.78, 0.34) has good reach but low engagement and may need improving. Campaigns B (0.45, 0.23) and E (0.40, 0.34) have lower scores for both and may need to be re-evaluated. title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78]

• Explain the example Quadrant diagram
  This quadrant chart shows how six campaigns are performing based on two things: how many people saw them (reach) and how many interacted with them (engagement). Both scores range from 0 to 1, where 1 is the highest possible score, meaning the campaign reached or engaged with everyone in the target group. The chart is split into four areas to make it easier to understand. Campaign C (0.57 reach, 0.69 engagement) and Campaign F (0.35, 0.78) are in the top right, showing high reach and high engagement — these fall under “We should expand.” Campaign A (0.3, 0.6) has strong engagement but lower reach, so it’s in the “Need to promote” area. Campaign D (0.78, 0.34) has good reach but low engagement and may need improving. Campaigns B (0.45, 0.23) and E (0.40, 0.34) have lower scores for both and may need to be re-evaluated.

Xy bar line chart - accessible

///mermaid %%{init: {'look': 'handDrawn', 'theme': 'neutral', 'themeVariables': {'primaryColor': '#005EB8'}}}%% xychart-beta accTitle: Example bar chart accDescr: This XY bar chart shows the amount of time spent training each day over the course of a week. The x-axis represents the days of the week, from Monday to Sunday, and the y-axis shows the time trained in minutes, ranging from 0 to 300 minutes. The chart shows that on Monday, 60 minutes were spent training, Wednesday had 120 minutes, Thursday had 180 minutes, Friday had 230 minutes, and Saturday had the most time trained with 300 minutes. Tuesday and Sunday had no training time, both showing 0 minutes. title "Training progress" x-axis [mon, tues, wed, thur, fri, sat, sun] y-axis "Time trained (minutes)" 0 --> 300 bar [60, 0, 120, 180, 230, 300, 0]

• Explain the example Bar chart
  This XY bar chart shows the amount of time spent training each day over the course of a week. The x-axis represents the days of the week, from Monday to Sunday, and the y-axis shows the time trained in minutes, ranging from 0 to 300 minutes. The chart shows that on Monday, 60 minutes were spent training, Wednesday had 120 minutes, Thursday had 180 minutes, Friday had 230 minutes, and Saturday had the most time trained with 300 minutes. Tuesday and Sunday had no training time, both showing 0 minutes.

Git diagram - accessible

///mermaid %%{init: { "theme": "default", "themeVariables": { "git0": "#005eb8", // NHS Blue for base "git1": "#231f20", // NHS Black for highlights "git2": "#425563", // NHS Dark Grey "gitBranchLabelColor": "#ffffff", "gitLabelColor": "#231f20", "lineColor": "#005eb8", "textColor": "#231f20" } }}%% gitGraph accTitle: Example release diagram accDescr: This release diagram shows the timeline of key stages in the development and release of a project. It starts with the "Front door" stage, marking the beginning of the project. The next milestone is "Prototype standard:", which is tagged with version v1.0.0, indicating the first official version of the prototype. After that, the project reaches the "FCAP approved" stage, followed by the "Review" phase, which is tagged with RC_1, representing the review for release candidate 1. The project then moves to the "Standard published" milestone, marking the official publication of the standard. Following that, the "Adopted" stage is highlighted and tagged with version 8.8.4, showing that the standard has been formally accepted. Finally, the project reaches the "Retired" stage, signifying the end of its active development phase. commit id: "Front door" commit id: "Prototype standard:" type: NORMAL tag: "v1.0.0" commit id: "FCAP approved" commit id: "Review" type: REVERSE tag: "RC_1" commit id: "Standard published" commit id: "Adopted" type: HIGHLIGHT tag: "8.8.4" commit id: "Retired"

• Explain the example Progress diagram
  This release diagram shows the timeline of key stages in the development and release of a project. It starts with the "Front door" stage, marki