IBM Support

Customized Journeys with Mermaid

General Page

The main purpose of Mermaid is to help with Visualizing Documentation and resources using text and code. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Get started learning about mermaid syntax here: https://mermaid-js.github.io/mermaid/#/./n00b-syntaxReference

See an example of a collections journey using advanced mermaid.

https://techzone.ibm.com/collection/ibm-engineering-lifecycle-management-quick-starts

example mermaid collection


How to create advanced Mermaid journeys on your collections

  1. Navigate to your owned collection and select the edit button in the top right banner of the collection page.

  2. From the edit collection form, navigate to the Journey section. Click the "Add a journey" button.

add a journey

  1. Fill in the title, synopsis, description, as these are required fields.

  2. To create an advanced mermaid journey which is a fully customizable workflow, select from the Layout field "Advanced".

create advanced mermaid journey

  1. This will display an additional field, called "Diagram". This field is where you will input your customized mermaidjs diagram markdown.

diagram journey field

Supporting documentation

Leverage the Mermaidjs docs site: https://mermaid-js.github.io/mermaid/#/flowchart
 

Support

This is not fully supported by IBM Technology Zone team.

For any inquiries, questions, or support, please reach out to our team by creating a support case.

[{"Type":"MASTER","Line of Business":{"code":"","label":""},"Business Unit":{"code":"","label":""},"Product":{"code":"SSNR6KN","label":"IBM Technology Zone"},"ARM Category":[{"code":"a8mKe0000004CVfIAM","label":"Content-\u003EPortal"}],"ARM Case Number":"","Platform":[{"code":"PF025","label":"Platform Independent"}],"Version":"All Versions"}]

Document Information

Modified date:
19 February 2025

UID

ibm17159461

Page Feedback