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

• Explain the Standards Directory piechart example
  Imagine you’re looking inside a special product to see what it’s made of. The biggest part you’ll find is Potassium—it takes up half the space, making it the star of the mix. Next comes Calcium, not quite as much, but still a big chunk. Then there’s a smaller slice of Magnesium, and finally, just a tiny bit of Iron. Each part is shown in a different colour and clearly labelled, so it’s easy to see who’s who in this mix. It’s like a recipe, showing you exactly what’s inside and how much of each ingredient there is.

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 Standards Directory entity relationship example
  Think of an online shop where everything is connected like a big team working together. It all starts with the customer, who places orders and gets invoices. That customer might have a few delivery addresses, and each address can be used for different orders. Every order includes items, and each item is linked to a product. These products are grouped into categories, like putting similar things on the same shelf. When an order is placed, an invoice is created to show what was bought and how much it costs. This diagram tells the story of how customers, products, orders, and deliveries all link up to make online shopping smooth and organised

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 Standards Directory class example
  Imagine a big animal family where everyone shares some basic traits, but each one also has their own special talents. At the top is the Animal group—every creature in the story is part of this group. They all have an age, a gender, and can do two things: check if they’re a mammal and find a mate. Now, meet the three animals in this family. Ducks have colourful beaks and love to swim and quack. Fish are a bit more private—they keep their size to themselves but enjoy eating. Zebras are wild at heart and love to run. This diagram helps us see how animals can belong to the same group while still being unique in their own way.

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 Standards Directory quadrant example
  Imagine you’re looking at how well six different campaigns are doing, like checking how many people saw them and how many actually got involved. The chart is like a map with four areas. Campaigns C and F are the stars—they reached lots of people and got them interested too, so they’re in the “We should expand” zone. Campaign A got people engaged but didn’t reach as many, so it needs more promotion. Campaign D reached a lot of people but didn’t hold their attention, so it might need some changes. Campaigns B and E didn’t do so well on either front, so they may need a fresh look. This chart helps teams decide what’s working, what needs a boost, and what might need rethinking.

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 Standards Directory xychart example
  This chart tells the story of a week of training. On Monday, the week starts off with a solid 60 minutes of effort. Tuesday is a rest day, with no training at all. Things pick up on Wednesday with 120 minutes, and even more on Thursday with 180. By Friday, the pace is strong with 230 minutes, and Saturday is the biggest push—300 minutes of training, the most all week. Sunday is another break, giving time to rest and recover. The chart shows how training time changes each day, helping to spot patterns and plan better for the next week.

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 Standards Directory release example
  This diagram tells the story of a project’s journey from start to finish. It begins at the “Front door,” where the idea first takes shape. The team then builds a first version, called the “Prototype standard,” which is marked as version 1.0.0. After some checks, it gets “FCAP approved,” showing it’s ready to move forward. Next comes the “Review” stage, where the team prepares a version for final testing, tagged as RC_1. Once everything looks good, the “Standard published” milestone is reached—it’s now official. Later, the standard is fully “Adopted,” marked with version 8.8.4, meaning it’s being used in real life. Finally, the project reaches the “Retired” stage, where active work ends, and the standard is no longer updated.

///mermaid graph TD %% Main Entities Org[Organisation] Team[Team] Person[Person] CareActors[Care Actors] SubjectOfCare[Subject of Care] Observations[Observations]

%% Left Side - Contextual Information
LegalInfo[Legal Information]
AdminInfo[Administrative Information]
ConsentInfo[Consent Information]
AuditInfo(Audit Info.)

%% Right Side - Care Process
Assessments[Assessments]
CarePlans[Care Plans]
Instructions[Instructions\nActions\nActivities]

%% Relationships

%% Care Actors
Org --> CareActors
Team --> CareActors
Person --> CareActors

%% Subject of Care Relationships
CareActors -- Supports\nProvides Care for\nTakes Decisions on Behalf of --> SubjectOfCare

LegalInfo -- Concerns --> SubjectOfCare
AdminInfo -- Concerns --> SubjectOfCare
ConsentInfo -- Concerns --> SubjectOfCare

SubjectOfCare -- Peformed for --> Assessments
SubjectOfCare -- Peformed for --> CarePlans
SubjectOfCare -- Peformed for --> Instructions

SubjectOfCare -- Refers to --> Observations

%% Care Process Relationships
Assessments --> CarePlans
CarePlans --> Instructions

%% Observations Relationships
Observations -- Recorded --> Assessments
Observations -- Recorded --> CarePlans
Observations -- Recorded --> Instructions

Observations -- Influences --> Assessments
Observations -- Influences --> CarePlans
Observations -- Influences --> Instructions

%% Audit Info - represented as a block on the side as in the image
AuditInfo