More information
Flowchart diagram - accessible
%%{
init: {
'theme': 'base'
}
}%%
%%{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
Mindmap - accessible when not paired with Sankey diagram due to duplicate ids (node-1)
%%{
init: {
'theme': 'base'
}
}%%
%%{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)
Standards Directory Roadmap (2024 - 2026) Gantt chart - accessible
%%{
init: {
'theme': 'base'
}
}%%
%%{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
%%{
init: {
'theme': 'base'
}
}%%
%%{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
%%{
init: {
'theme': 'base'
}
}%%
%%{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"
Class diagram - accessible
%%{
init: {
'theme': 'base'
}
}%%
%%{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()
}
Quadrant diagram - accessible
%%{
init: {
'theme': 'base'
}
}%%
%%{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]
Xy bar line chart - accessible
%%{
init: {
'theme': 'base'
}
}%%
%%{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]
%%{
init: {
'theme': 'base'
}
}%%
%%{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"