5.2 KiB

Raw Blame History

Accessibility Options

Edit this Page

Accessibility

Now with Mermaid library is in much wider use, we have started to work towwards more accessible features, based on the feedback from the community.

TO begin with, we have added a new feature to Mermaid library, which is to support accessibility options, Accessibility Title and Accessibility Description.

This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.

Defining Accessibility Options

Single line accessibility values

The diagram authors can now add the accessibility options in the diagram definition, using the accTitle and accDescr keywords, where each keyword is followed by : and the string value for title and description like:

accTitle: "Your Accessibility Title" or
accDescr: "Your Accessibility Description"

When these two options are defined, they will add a coressponding <title> and <desc> tag in the SVG.

Let us take a look at the following example with a flowchart diagram:

   graph LR
      accTitle: Big decisions
      accDescr: Flow chart of the decision making process
      A[Hard] -->|Text| B(Round)
      B --> C{Decision}
      C -->|One| D[Result 1]

See in the code snippet above, the accTitle and accDescr are defined in the diagram definition. They result in the following tags in SVG code:

Multi-line Accessibility title/description

You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket { and then mutltile lines, followed by a closing }.

accTitle: My single line title value (single line format)

accDescr: { My multi-line description of the diagram } (multi-line format)

Let us look at it in the following example, with same flowchart:

   graph LR
      accTitle: Big decisions

      accDescr {
        My multi-line description
        of the diagram
      }

      A[Hard] -->|Text| B(Round)
      B --> C{Decision}
      C -->|One| D[Result 1]

See in the code snippet above, the accTitle and accDescr are defined in the diagram definition. They result in the following tags in SVG code:

Sample Code Snippet for other diagram types

Sequence Diagram

   sequenceDiagram
      accTitle: My Sequence Diagram
      accDescr: My Sequence Diagram Description

      Alice->>John: Hello John, how are you?
      John-->>Alice: Great!
      Alice-)John: See you later!

Class Diagram

   classDiagram
      accTitle: My Class Diagram
      accDescr: My Class Diagram Description

      Vehicle <|-- Car

State Diagram

   stateDiagram
      accTitle: My State Diagram
      accDescr: My State Diagram Description

       s1 --> s2

Entity Relationship Diagram

   erDiagram
      accTitle: My Entity Relationship Diagram
      accDescr: My Entity Relationship Diagram Description

    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey Diagram

  journey
      accTitle: My User Journey Diagram
      accDescr: My User Journey Diagram Description

      title My working day
      section Go to work
        Make tea: 5: Me
        Go upstairs: 3: Me
        Do work: 1: Me, Cat
      section Go home
        Go downstairs: 5: Me
        Sit down: 5: Me

Gantt Chart

   gantt
      accTitle: My Gantt Chart Accessibility Title
      accDescr: My Gantt Chart Accessibility Description

    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

Pie Chart

   pie
      accTitle: My Pie Chart Accessibility Title
      accDescr: My Pie Chart Accessibility Description

    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

Requirement Diagram

  requirementDiagram
      accTitle: My Requirement Diagram
      accDescr: My Requirement Diagram Description

       requirement test_req {
  id: 1
  text: the test text.
  risk: high
  verifymethod: test
  }

  element test_entity {
  type: simulation
  }

  test_entity - satisfies -> test_req

Gitgraph

  gitGraph
      accTitle: My Gitgraph Accessibility Title
      accDescr: My Gitgraph Accessibility Description

     commit
     commit
     branch develop
     checkout develop
     commit
     commit
     checkout main
     merge develop
     commit
     commit

5.2 KiB Raw Blame History