Table of Contents

• How to create embedded diagrams for this website
  • ditaa – DIagrams Through Ascii Art
  • shaape – Ascii drawings
  • Graphviz – Graph Visualization Software
  • blockdiag – block diagrams
  • actdiag – activity diagrams
  • nwdiag – network diagrams
  • seqdiag – sequence diagrams
  • mermaid – sequence diagrams and flowchars
  • PlantUML
    • PlantUML Sequence Diagrams
    • PlantUML Usecase Diagram
    • PlantUML Class Diagram
    • PlantUML State Diagram
    • PlantUML Activity Diagram
    • PlantUML Component Diagram
    • PlantUML Deployment Diagram
    • PlantUML Salt Diagram
  • wavedrom – Digital Timing Diagrams
  • Google Charts

How to create embedded diagrams for this website

Besides inserting your locally created images, the formatting engine used for the machinekit website supports a variety of embedded diagram types: Diagrams can be created by embedded markup and will be rendered to images in the website automatically.

See the Asciidoctor Diagram manual for details.

ditaa – DIagrams Through Ascii Art

See the ditaa website for details.

shaape – Ascii drawings

See the shaape manual.

Graphviz – Graph Visualization Software

See the Graphviz website.

blockdiag – block diagrams

See the blockdiag manual.

actdiag – activity diagrams

See the actdiag manual.

nwdiag – network diagrams

See the nwdiag manual.

seqdiag – sequence diagrams

See the seqdiag manual.

mermaid – sequence diagrams and flowchars

See the mermaid website.

These come out too wide, for some reason this plugin does not respect the width= parameter discussed here.

PlantUML

PlantUML Sequence Diagrams

See the PlantUML website for more examples

PlantUML Usecase Diagram

See the PlantUML website for more examples

PlantUML Class Diagram

See the PlantUML website for more examples

PlantUML State Diagram

See the PlantUML website for more examples

PlantUML Activity Diagram

See the PlantUML website for more examples

PlantUML Component Diagram

See the PlantUML website for more examples

PlantUML Deployment Diagram

See the PlantUML website for more examples

PlantUML Salt Diagram

See the PlantUML website for more examples

wavedrom – Digital Timing Diagrams

See the wavedrom website, and this interesting article.

Google Charts

can be embedded in a passthrough block. Example from here.