headjump.de

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)

• Download < complete sources and samples pack
• Preview editor < live preview
• When to use
• Fork at Github

Setup (it's easy!)

1. Put javascript links inside HTML head to jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js

   You can download the source files or simply put this in:

   <link href="http://www.headjump.de/stylesheets/arrowsandboxes.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
   <script src="http://www.headjump.de/javascripts/jquery_wz_jsgraphics.js" type="text/javascript"></script>
   <script src="http://www.headjump.de/javascripts/arrowsandboxes.js" type="text/javascript"></script>
   

2. 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 elsewhere

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,c] >hates [j]) ||
(d:Drinks) (c:Comics) (j:Jogging)

() (Dennis >likes [d,c] >hates [j]) ||
(d:Drinks) (c:Comics) (j:Jogging)

• 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)