Markdown Descriptions

Overview

Flows and steps have a space for entering clarifying comments and documentation in their properties dialogs.

The documentation is interpreted as markdown.

Markdown Features

Headings

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

Emphasis

You can make text bold, italic, or strikethrough

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~

Links

This is how you link text

This is how you [link text](https://tweakstreet.io)

You can also add a title

You can also add [a title](https://tweakstreet.io "This is the title text!")

Links are autoconverted – like this one: https://tweakstreet.io

Links are autoconverted -- like this one: https://tweakstreet.io

You can also define a link and then reference it multiple times.

You can also define a [link][download] and then [reference][download] it multiple [times][download].

<!-- here's the url reference, it does not appear directly -->
[download]: https://tweakstreet.io/download  "Download!"

Typographic Replacements

© © ® ® ™ ™ § § ± … – —

(c) (C) (r) (R) (tm) (TM) (p) (P) +- ... -- ---

Emoji

By Name

🚀 😉 😕 😢 😡 😆 😋 😲

:rocket: :wink: :confused: :cry: :rage: :laughing: :yum: :astonished:

See reference list of all supported names

By Shortcut

😃 😦 😎 😉 😐

:-) :-( 8-) ;) :|

See all shortcuts

Subscript

H₂O subscript

H~2~O subscript

Superscript

20^th superscript

20^th^ superscript

Deleted and Inserted

You can mark text deleted and as inserted

You can mark text ~~deleted~~ and as ++inserted++.

Marked Text

This text is marked - like with a text marker.

This text is ==marked== - like with a text marker.

Blockquotes

“I didn’t fail. I just found 100 ways to do it wrong.”

  – Benjamin Franklin

> "I didn't fail. I just found 100 ways to do it wrong."
>
>   -- **Benjamin Franklin**

Lists

Unordered

• Create a list by starting a line with +, -, or *
• Sub-lists are made by indenting 2 spaces:
  • Sublist item 1
  • Sublist item 2
• Very easy!

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Sublist item 1
  - Sublist item 2
+ Very easy!

Ordered

Simple

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

Let the computer figure out the numbering

1. You can use sequential numbers…
2. …or keep all the numbers as 1.
3. It’s useful when re-ordering items
4. So you don’t have to keep track of the numbers.

1. You can use sequential numbers...
1. ...or keep all the numbers as 1.
1. It's useful when re-ordering items
1. So you don't have to keep track of the numbers.

Code

Inline

You can mark some code within a sentence with backticks.

You can mark some `code` within a sentence with backticks.

You can mark a whole block as code:

mov     $1, %rax                # system call 1 is write
mov     $1, %rdi                # file handle 1 is stdout
mov     $message, %rsi          # address of string to output
mov     $13, %rdx               # number of bytes
syscall                         # invoke operating system to do the write

To do that you use a ‘fence’ of backticks:

```plaintext
mov     $1, %rax                # system call 1 is write
mov     $1, %rdi                # file handle 1 is stdout
mov     $message, %rsi          # address of string to output
mov     $13, %rdx               # number of bytes
syscall                         # invoke operating system to do the write
```

Syntax highlighting

You can add the language name to the code fence. Most popular languages should be correctly highlighted:

Tweakflow

let {
  format: time.formatter("cccc, d MMMM uuuu");
}
format(2020-08-16T)

```tweakflow
let {
  format: time.formatter("cccc, d MMMM uuuu");
}
format(2020-08-16T)
```

Javascript

function initHighlight(block, cls) {
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}

```javascript
function initHighlight(block, cls) {
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
}
```

Tables

Name	Occupation	Date of Birth
Sherlock Holmes	Consulting Detective	January 6th, 1854
John Watson	Military Surgeon, Physician	August 7th, 1852

Note how column alignment is determined by the second row of the markup

| Name             |  Occupation                  | Date of Birth     |
| :--              |             :-:              |               --: |
| Sherlock Holmes  | Consulting Detective         | January 6th, 1854 |
| John Watson      | Military Surgeon, Physician  | August 7th, 1852  |

Horizontal Rules

---

Horizontal rules are created by any of the following:

___

---

***

Images

Basic Image

![coffee](https://source.unsplash.com/600x400/?coffee "Coffee Please!")

Controlling Size

If you need to control an image’s size, use a HTML tag:

<img
   alt="Cocoa Please!"
   src="https://source.unsplash.com/600x400/?cocoa,drink"
   width="300"
/>

Linking

You can link images too. It works exactly like linking text.

[![travel](https://source.unsplash.com/600x400/?travel,nature "Traveling!")](https://tweakstreet.io)

Referencing

Like links, images also have a footnote style syntax:

![water][my-water-image]

<!-- And here's the image reference -->
[my-water-image]: https://source.unsplash.com/600x400/?water,nature  "Fresh!"

Notifications

Tweakstreet uses a special visual to display blocks fenced with ::: and a specific name.

The following variants are recognized:

Warning

::: warning
If you do this, you are on your own.
:::

Success

::: success
You've made it. I knew it!
:::

Info

::: info
Sometimes you just need  a notification.
:::

Danger

::: danger
_You really should think twice before proceeding!_
:::

Definition Lists

Compact Style

Term 1

Definition 1

Term 2

Definition 2a

Definition 2b

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

Extended Style

Term 1

Definition 1 with continuation.

Term 2

Definition 2

{
  :some "code",
  :part "of Definition 2"
}

Third paragraph of definition 2.

Term 1

:   Definition 1
with continuation.

Term 2

:   Definition 2

    ```tweakflow
    {
      :some "code",
      :part "of Definition 2"
    }
    ```

    Third paragraph of definition 2.

Diagrams

You can create diagrams using nomnoml syntax.

See the nomnoml language reference for syntax documentation.

```nomnoml
#direction: down

#spacing: 35
#padding: 12
#lineWidth: 1.5
#edgeMargin: 12
#arrowSize: 1.3
#fontSize: 12
#leading: 1.5
#fillArrows: true

#.initial: fill=#FF9090 visual=roundrect
#.choice: fill=#FFF060 visual=rhomb
#.done: fill=#A0FFA0 visual=roundrect

[<initial>Lamp broken] -:> [<choice>Lamp plugged in?]
[Lamp plugged in?] yes -:> [<choice>Bulb burned out?]
[Lamp plugged in?] no -> [<done>Plug in lamp]
[Bulb burned out?] yes -> [<done>Replace bulb]
[Bulb burned out?] no -> [<done>Repair lamp]
```