About

Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like (User) > (Admin)

... which will be transformed to:

(User) > (Admin)

Get or fork it at Github!

The following examples are no screenshots - they are dynamically created by Arrows-and-boxes with the code displayed above each example ;)

Setup (it's easy!)

1. Put javascript links inside HTML head to jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js
2. Put a css link inside HTML head to arrowsandboxes.css

3. Place a <pre> block around your arrows-and-boxes markup and set the class to arrows-and-boxes:

   <pre class="arrows-and-boxes"> (User) > (Admin) </pre>

   Arrows-and-boxes automatically detects the code and builds nice boxes and arrows from it.

Basic example

Inline arrows and nodes:

(Dennis) >likes (Food)

(Dennis) >likes (Food)

• Define a box with "( )", and a link with ">", "<", "-".
• An arrow can be put between Boxes in a single line, or inside a box, if the target is "further away" (see below for an example)
• Basic box format: (box_title | box_subtitle)
• Complete box format: (box_id{custom_class}: box_title | box_subtitle >arrow_label [arrow_target1, arrow_target2, ...] <arrow2_label [arrow2_target])

New lines

Nodes will be placed after each other in one line. Start a new line with "||".

(Node1) (Node1_2) ||
(Node2) || (Node3)

(Node1) (Node1_2) ||
(Node2) || (Node3)

Different arrow types

(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)

(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)

Linking elswhere

Writing (node_id: My Node) gives the node the id "node_id" (must be followed by ":"). You can use it to define a target for a link inside a node definition

(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)

(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)

• Arrows between boxes: >arrow_label
• Arrows defined INSIDE a box: >arrow_label [arrow_target1, arrow_target2, ...]

Want subtitles?

Writing a "|" after your title makes the rest of the text a subtitle. If it's too large to fit the boy, hover with your mouse to make it visible. Using "|" on an arrow label will cause a line break.

(Dennis|has a subtitle) > label | new line (node)

(Dennis|has a subtitle) > label | new line (node)

Highlight nodes and arrows!

(boring) > (boring) >> ((Highlighted))

(boring) > (boring) >> ((Highlighted))

Use Dummy nodes to get more space

Defining a node without a title (= empty node) makes it a "Dummy node". It won't be visible, but gives some space.

Dummy nodes can also have ids and arrows, so you can acutally use them as arrow-targets and -sources.

(Dennis) -likes () > (Food)

(Dennis) -likes () > (Food)

Use Dummy nodes to bend your arrows

(Dennis) - (>likes[f]) ||
() (f:Food)

(Dennis) - (>likes[f]) ||
() (f:Food)

HTML in your texts

Put {{ }} around something let's you use HTML inside node titles, subtitles and arrow labels. So you can use anything you like (images and stuff).

(Dennis) > links ({{<a href="http://www.headjump.de">headjump.de</a>}})

(Dennis) >links ({{headjump.de}})

Custom classes for your nodes

Writing {my_class_name} before the ":" that is used to seperate the node id from the title will add the classname to the created node. Inspect the element if you don't trust me:

({custom_class}:Custom class)

({custom_class}:Custom class)