Association types
association -association ->
association <->
dependency -->
dependency <-->
generalization -:>
implementation --:>
composition +-
composition +->
aggregation o-
aggregation o->
ball and socket -o)
ball and socket o<-)
ball and socket ->o
note --
hidden -/-
Class diagram types
[class]
[<abstract> abstract]
[<instance> instance]
[<reference> reference]
[<package> package|components]
[<frame> frame|]
Component diagram types
[Component] - [<socket> socket]
[<lollipop> lollipop] - [Component]
Flow chart types
[<start> start]
[<end> end]
[<state> state]
[<choice> choice]
[<sync> sync]
[<input> input]
[<sender> sender]
[<receiver> receiver]
[<transceiver> transceiver]
Use case types
[<actor> actor]
[<usecase> usecase]
Miscalleneous types
[<note> note]
[<label> label]
[<hidden> hidden]
[<database> database]
[<pipe> pipe]
[<table> table| a | 5 || b | 7]
Comments
Comments are supported at the start of a line//[commented] [not //commented]
Id attribute
Two distinct nodes can have the same display name with the id attribute.[<actor id=a>User] [<actor id=b>User] [a] -- [b]
Directives
#import: filename#arrowSize: 1
#bendSize: 0.3
#direction: down | right
#gutter: 5
#edgeMargin: 0
#gravity: 1
#edges: hard | rounded
#background: transparent
#fill: #eee8d5; #fdf6e3
#fillArrows: false
#font: Calibri
#fontSize: 12
#leading: 1.35
#lineWidth: 3
#padding: 8
#spacing: 40
#stroke: #33322E
#title: filename
#zoom: 1
#acyclicer: greedy
#ranker: network-simplex | tight-tree | longest-path
Custom classifier styles
A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.
#.box: fill=#8f8 dashed #.blob: visual=ellipse title=bold [<box> GreenBox] [<blob> Blobby]
Modifiers
dashedKey/value pairs
fill=(any css color)stroke=(any css color)
align=center
align=left
direction=right
direction=down
visual=actor
visual=class
visual=database
visual=ellipse
visual=end
visual=frame
visual=hidden
visual=input
visual=none
visual=note
visual=package
visual=pipe
visual=receiver
visual=rhomb
visual=roundrect
visual=sender
visual=start
visual=sync
visual=table
visual=transceiver
Style title and text body
title=left,italic,boldbody=center,italic,bold
Text modifiers
boldcenter
italic
left
underline