Markdown

Markdown is a filter which renders Markdown to HTML. It optionally styles it by enclosing into a <div class="markdown-body"> recognized by github-markdown-css.

The filter also processes markdown which allows to embed diagrams using fenced code blocks.

Markdown source can be defined in the YAML definition or loaded from an external resource.

• Inline Markdown
  • Single line
  • Multi-line
• Markdown loaded from resource
• Embedded images
  • PNG resource
  • JPEG resource
  • PNG
  • JPEG
• Embedded diagrams
  • Draw.io
  • PlantUML
    • Loading from a resource
    • Inline
      • UML
        • Sequence
        • Component
      • Wireframe
      • Gantt
      • Mind Map
      • WBS
  • Mermaid
    • Loading from a resource
• Extensions

Inline Markdown

Single line

content-markdown:
  style: true
  source:
    content-text: Hello, *World*!

Multi-line

content-markdown:
  style: true
  source:
    content-text: |+2
      Hello, ``Universe``!

Markdown loaded from resource

content-markdown:
  style: true
  source:
    content-resource: features/execution-model.md  

Embedded images

Markdown filter allows to embed PNG and JPEG using fenced blocks.

PNG resource

```png-resource
nasdanika-logo.png
```

Resource location is resolved relative to the model resource containing filter definition. If the filter model element has a marker, e.g. it was loaded from YAML, then the resource location is resolved to the location of that YAML file even if the model was saved to, say, XML after that.

JPEG resource

```jpeg-resource
my.jpeg
```

PNG

```png
Base 64 encoded png 
```

JPEG

```jpeg
Base 64 encoded jpeg
```

Embedded diagrams

Markdown filter allows to embed PlantUML, Draw.io, and Mermaid diagrams using fenced blocks. Draw.io diagrams can be edited in a desktop editor or Online editor.

Draw.io

```drawio-resource
aws.drawio
```

Resource location is resolved in the same way as for image files as explained above.

PlantUML

PlantUML diagrams can be defined inline or loaded from resources.

Loading from a resource

```uml-resource
sequence.plantuml
```

In the above snippet uml is a dialect supported by PlantUML (see below) and sequence.plantuml is a resource containing a diagram definition without @startuml and @enduml. Resource location is resolved in the same as for image files as explained above.

Inline

The following language specifications (dialects) are supported:

• uml - for the following diagram types:
  • Sequence,
  • Use Case,
  • Class,
  • Activity,
  • Component,
  • State,
  • Object,
  • Deployment,
  • Timing,
  • Network.
• wireframe - for Wireframe diagrams
• gantt - for Gantt diagrams
• mindmap - for Mind Maps
• wbs - for Work Breakdown Structures

UML

Sequence

Fenced block:

```uml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
```

Diagram:

Component

Component diagram with links to component pages.

Fenced block:

```uml
package Core {
   component Common [[https://docs.nasdanika.org/modules/core/modules/common/index.html]]
}

package HTML {
   component HTML as html [[https://docs.nasdanika.org/modules/html/modules/html/index.html]]
   [html] ..> [Common]
}
```

Diagram:

Wireframe

Fenced block:

```wireframe
{
  Just plain text
  [This is my button]
  ()  Unchecked radio
  (X) Checked radio
  []  Unchecked box
  [X] Checked box
  "Enter text here   "
  ^This is a droplist^
}
```

Diagram:

Gantt

Fenced block:

```gantt
[Prototype design] lasts 15 days and links to [[https://docs.nasdanika.org/index.html]]
[Test prototype] lasts 10 days
-- All example --
[Task 1 (1 day)] lasts 1 day
[T2 (5 days)] lasts 5 days
[T3 (1 week)] lasts 1 week
[T4 (1 week and 4 days)] lasts 1 week and 4 days
[T5 (2 weeks)] lasts 2 weeks
```

Diagram:

Mind Map

Fenced block:

```mindmap
* Debian
** [[https://ubuntu.com/ Ubuntu]]
*** Linux Mint
*** Kubuntu
*** Lubuntu
*** KDE Neon
** LMDE
** SolydXK
** SteamOS
** Raspbian with a very long name
*** <s>Raspmbc</s> => OSMC
*** <s>Raspyfi</s> => Volumio
```

Diagram:

WBS

WBS elements can have links. This type of diagram can also be used to display organization structure.

```wbs
* [[https://docs.nasdanika.org/index.html Business Process Modelling WBS]]
** Launch the project
*** Complete Stakeholder Research
*** Initial Implementation Plan
** Design phase
*** Model of AsIs Processes Completed
**** Model of AsIs Processes Completed1
**** Model of AsIs Processes Completed2
*** Measure AsIs performance metrics
*** Identify Quick Wins
** Complete innovate phase
```

Fenced block:

Diagram:

Mermaid

You can define Mermaid diagrams in mermaid fenced blocks:

flowchart LR
   Alice --> Bob & Chuck --> Deb

results in this diagram:

Loading from a resource

It is also possible to load a diagram definition from a resource resolved relative to the model resource:

```mermaid-resource
sequence.mermaid
```

Extensions

• Table of contents - add [TOC] to the document as explained in the documentation. This extension will create a table of contents from markdown headers.
• Footnotes
• Strikethrough: ~~strikethrough~~-> strikethrough
• Subscript: H~2~O -> H₂0
• Superscript: 2^5^ = 32 -> 2⁵ = 32