box

A thing in a flowchart, drawn as a shape holding its text.

boxNode
Three connected boxes of different shapes: a rounded terminal, a plain box with two lines of text, and an orange decision diamond.Three connected boxes of different shapes: a rounded terminal, a plain box with two lines of text, and an orange decision diamond.

#Attributes

shapeImplicit
The implicit attribute, box#check:decision{…}. The flowchart's box (the default, a rounded rectangle), decision (a diamond: one arrow leaves by its front vertex, two by its side vertices, more by the sides with the rest spread about the front), terminal (a pill) and ellipse. Entity–relationship: entity and weak-entity (a rectangle, doubled), relationship and identifying-relationship (a diamond, doubled), attribute and multivalued-attribute (an ellipse, doubled) and key-attribute (its label underlined).
boxdecisionterminalellipseentityweak-entityrelationshipidentifying-relationshipattributemultivalued-attributekey-attribute
Can be written as shorthand: box:value
Defaultbox
group
What kind of thing the box is. Boxes of one group share a hue — the environment's hues: pins it, or the next free hue is dealt — and the footer keys each group. A box's own colour: still wins.
string
colourAnimatable
The box fills with the hue's tint and its text takes the hue; unset, it sits on the environment's ground. Wins over the box's group: hue.
colour
Also written: color
hiddenAnimatable
Declared but not drawn, and taking no room while hidden: the arrangement makes room when it is revealed, the rest gliding aside. Animatable.
boolean
Defaultfalse

#Allowed content

Body { }The box's text, rich inline; one source line per line of the box — the first is the label, the rest sit smaller beneath it

#Allowed in

cue { }cue.draw { }cue.trace { }cue.highlight { }cue.spotlight { }flowchart { }

#Examples

A box holding two lines of text, PCR amplify and 30 cycles, with an arrow into it.A box holding two lines of text, PCR amplify and 30 cycles, with an arrow into it.
flowchart{
    box#sample:terminal{Sample collected}
    box#pcr{
        PCR amplify
        30 cycles
    }
    arrow(from: #sample; to: #pcr)
}(
    direction: right
)
An orange decision diamond reading Enough DNA?, with an arrow into it.An orange decision diamond reading Enough DNA?, with an arrow into it.
flowchart{
    box#pcr{PCR amplify}
    box#check:decision{Enough DNA?}(colour: orange)
    arrow(from: #pcr; to: #check)
}(
    direction: right
)
Four boxes in two groups, Theory in purple and Method in teal, with the footer keying the two hues.Four boxes in two groups, Theory in purple and Method in teal, with the footer keying the two hues.
flowchart:right{
    box#positivism{Positivism}(group: Theory)
    box#survey{Survey}(group: Method)
    box#interpretivism{Interpretivism}(group: Theory)
    box#interview{Interview}(group: Method)
    arrow(from: #positivism; to: #survey)
    arrow(from: #interpretivism; to: #interview)
}(
    hues: Theory = purple, Method = teal
)

#Notes

  • The body is the box's text, rich inline: maths, bold and live {{…}} values all work.
  • The first line of the text is the label; every further line is set smaller and muted beneath it.
  • Text longer than the widest box wraps.
  • The environment places every box, in ranks along its direction: by what the arrows connect.

Last updated