Text elements¶

Text elements are single elements on the diagram and the base building blocks. They are either Terminal, NonTerminal, Comment, Arrow or Skip.

Terminal¶

Terminal represents literal text. The Terminal element has a required property text, and three optional properties href, title and cls. The last two properties are only available with the JSON and YAML parsers.

Syntax¶

DSLJSONYAML

Basic syntax:

Terminal: my text

With a href:

Terminal https://github.com: github

Basic syntax:

{
    "element": "Terminal",
    "text": "my text"
}

With href:

{
    "element": "Terminal",
    "text": "github",
    "href": "https://github.com"
}

With additional options:

{
    "element": "Terminal",
    "text": "github",
    "href": "https://github.com",
    "title": "This is a link",
    "cls": "custom_terminal"
}

Without a label:

element: Terminal
text: my text

With href

element: Terminal
text: github
href: https://github.com

With additional options:

element: Terminal
text: github
href: https://github.com
title: This is a link
cls: custom_terminal

Properties¶

text: string, required
href: string, optional
title: string, optional, only available with the JSON and YAML parsers
cls: string, optional, only available with the JSON and YAML parsers

Output¶

Simple Terminal

With href

With additional options (hover for the title)

NonTerminal¶

NonTerminal represents another production or diagram. The NonTerminal element has a required property text, and three optional properties href, title and cls. The last two properties are only available with the JSON and YAML parsers.

Syntax¶

DSLJSONYAML

Basic syntax:

NonTerminal: my text

With a href:

NonTerminal https://github.com: github

Basic syntax:

{
    "element": "NonTerminal",
    "text": "my text"
}

With href:

{
    "element": "NonTerminal",
    "text": "github",
    "href": "https://github.com"
}

With additional options:

{
    "element": "NonTerminal",
    "text": "github",
    "href": "https://github.com",
    "title": "This is a link",
    "cls": "custom_terminal"
}

Without a label:

element: NonTerminal
text: my text

With href

element: NonTerminal
text: github
href: https://github.com

With additional options:

element: NonTerminal
text: github
href: https://github.com
title: This is a link
cls: custom_terminal

Properties¶

text: string, required
href: string, optional
title: string, optional, only available with the JSON and YAML parsers
cls: string, optional, only available with the JSON and YAML parsers

Output¶

Simple Terminal

With href

With additional options (hover for the title)

Comment¶

Represents a comment. The Comment element has a required property text, and three optional properties href, title and cls. The last two properties are only available with the JSON and YAML parsers.

Syntax¶

DSLJSONYAML

Basic syntax:

Comment: my text

With a href:

Comment https://github.com: github

Basic syntax:

{
    "element": "Comment",
    "text": "my text"
}

With href:

{
    "element": "Comment",
    "text": "github",
    "href": "https://github.com"
}

With additional options:

{
    "element": "Comment",
    "text": "github",
    "href": "https://github.com",
    "title": "This is a link",
    "cls": "custom_terminal"
}

Without a label:

element: Comment
text: my text

With href

element: Comment
text: github
href: https://github.com

With additional options:

element: Comment
text: github
href: https://github.com
title: This is a link
cls: custom_terminal

Properties¶

text: string, required
href: string, optional
title: string, optional, only available with the JSON and YAML parsers
cls: string, optional, only available with the JSON and YAML parsers

Output¶

Simple Comment

With href

With additional options (hover for the title)

Arrow¶

Syntax¶

DSLJSONYAML

Arrow right:

Arrow:

With a direction:

Arrow: left|right

Undirected:

Arrow: undirected

Arrow right:

{
    "element": "Arrow"
}

With a direction:

{
    "element": "Arrow",
    "direction": "left|right"
}

Undirected (draws a line):

{
    "element": "Arrow",
    "direction": "undirected"
}

Arrow right:

element: Arrow

With a direction:

element: Arrow
direction: left|right

Undirected:

element: Arrow
direction: undirected

Properties¶

direction: optional string, can be left or right to orient the arrow left or right, or any other string to draw a plain line instead.

Output¶

Arrow left

Arrow right

Undirected: a line

Skip¶

An empty line. Used for vertical blocks like Stack.

Syntax¶

DSLJSONYAML

Basic syntax:

Skip:

Basic syntax:

{
    "element": "Skip"
}

Basic syntax:

element: Skip

Properties¶

This element has no properties.

Output¶

Stack without Skip

Stack with Skip