QuantumJS
Home
Introduction
OverviewQuick StartThe Markup LanguageCore ConceptsUsing the CLI / APIQuantum vs Markdown
Config
quantum.config.js
Core Modules
quantum-corequantum-domquantum-html
Optional Modules
quantum-apiquantum-code-highlightquantum-diagramquantum-docsquantum-markdownquantum-templatequantum-version
Edit Page
quantum-diagram
A module for creating flow diagrams
About
This module provides the @diagram entity for including flow diagrams in a quantum site.
Example
Example Markup
Quantum
@diagram
  @item sugar [Sugar]
    Optional
@item milk [Milk]
  Optional
@item coffee [Coffee]
@item water [Water]
@item kettle [Kettle]
@item cup [Cup]
@item tasty [Tasty Beverage!]

@link sugar --> cup
@link milk --> cup
@link water -> kettle
@link kettle -> cup
@link coffee -> cup
@link cup -> tasty
Example Result
SugarOptional
Optional
Entities
The below entities are provided by the entityTransforms function.
Entities
diagramadded
Creates a flow diagram based on @item and @link entities
Entities
hideDescriptions
If this entity is provided inside an @diagram entity, the descriptions for that diagram will be hidden.
Example Markup
Quantum
@p: With Description:
@diagram
  @item user [User]
    Description of user

@p: Without description:
@diagram
  @hideDescriptions
  @item user [User]
    Description of user
Example Result

With Description:

UserDescription of user

Without description:

User
item
Displays a box with text/description in the diagram.
Example Markup
Quantum
@diagram
  @item itemid [Item 1]
    Description Line 1
    Long description with lines that don't wrap
Example Result
Item 1Description Line 1Long description with lines that don't wrap
link
Defines a link between two @item entities.
Example Markup
Quantum
@diagram
  @item item1 [Item 1]
  @item item2 [Item 2]

  @link item1 -> item2
Example Result
Item 1Item 2
API
Below are all the properties of the object returned from require('quantum-diagram'). For information about different versions, see the Changelog
Functions
entityTransformsObject[EntityTransform]added
A function that returns a set of EntityTransform functions for use in quantum-html
Returns
Object[EntityTransform]
The entity transforms to use in quantum-html to define the entities that can be rendered.
The ordering of links within a diagram affects how it is displayed.
The flow is calculated from the 'top left' meaning that links defined first will display at the top of the chart on the left, flowing down towards the bottom.
Reversing the order the links of the previous example causes the diagram to 'flip':
Example Markup
Quantum
@diagram
  @item sugar [Sugar]
    Optional
@item milk [Milk]
  Optional
@item coffee [Coffee]
@item water [Water]
@item kettle [Kettle]
@item cup [Cup]
@item tasty [Tasty Beverage!]

# Cup remains at the bottom (as it is the bottom of the chain)
@link cup -> tasty
# Coffee is now the leftmost item
@link coffee -> cup
@link kettle -> cup
@link water -> kettle
# Sugar appears to the left of milk
@link sugar --> cup
@link milk --> cup
Example Result
SugarOptional
Optional
To ensure correct flow, define links in the order they appear in the chain.