Fork me on GitHub

Arrows-and-boxes

written by Dennis on February 19th, 2010 @ 12:35 PM

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)

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

posted in:

Featured articles, Web dev, rails, javascript

tags:

, , , , , ,

accepting comments

47 comments
Digg This Reddit del.icio.us Technorati google YahooMyWeb Furl

Comments

  • t on 11 Mar 19:14

    Just came across your blog today and bookmarked it instantly! Looking forward to more jQuery and flash posts, especially updates on the pirate golf game.

  • Jarda on 16 Mar 14:15

    very nice I use it for difficult workflow generation. I have one suggestion – please, try find some solution for overlap lines or/and no lines thought box and it will be excellent. :o)

  • christian on 24 Apr 02:33

    exelent!!! congratulation. you are too clever…

  • ben on 06 May 15:06

    brovo! very nice work, I just work on net diagram painting, this article is exactly what to do it, thanks a lot for sharing, just time to dig it out now.

  • Nizar on 07 May 11:55

    Incredible work pal.. Just wanna ask, is there a way to draw multiple arrows from the same box but with different labels?

  • bearing10 on 08 May 01:48

    Nice Post,and Nice jquery Plugin

    It’s useful in web workflow diagram scenario

  • Nizar on 09 May 10:45

    Hey, Very nice work pal.. It only needs the ability to specify different arrow lables when linking to multiple boxes..

  • Dennis on 24 May 13:32

    @Nizar: It is already possible, I just forgot to put it in the doc ;). I just updated the above examples to demonstrate.

  • Eric on 16 Jun 01:25

    Just what do you mean by attaching a “custom class” to an element? I looked at the HTML via View Source and could not find any actual use of the custom class. Is it a CSS class? Or perhaps some way to categorize elements?

  • James on 25 Aug 22:12

    Hey Dennis, is there an easy method to control the node height? My nodes tend to be generated with a style=”height: 28px” and I cannot seem to override this without hacking the js. Thanks!

  • James on 25 Aug 22:16

    Ok, so I altered the CONFIG js array and was able to set the default node width and heights – this’ll do for now methinks and seems to be the way achieve the results I’m after

  • Eddie on 14 Sep 04:24

    Hey Dennis, excellent work! Really handy tool for including diagram building functionality into a site. Just wondering is that way we can set the coordinate (x, y) or exact location of the boxes?

  • Fernando on 29 Oct 17:10

    Very nice Dennis, thanks.

  • Dennis on 17 Nov 13:01

    @Eric

    Sorry, your comment was thrown to the spam folder till I found it today – yes, I mean a CSS class and made the explanation above clearer now.

    - Dennis

  • Sass on 03 Dec 17:03

    Great … Thanks

  • Atanas on 25 Dec 20:24

    Hi, is this project closed/deleted? i can’t get the rar from google projects, the svn there checkouts an empty repository… this looks great, but i just wanted to ask what’s the problem, cause i feel like stealing if i download the src from this page

    best regards nas

  • Dennis on 05 Jan 17:53

    Hi, I’m still using arrowsandboxes myself but no longer do changes on the code.

    I’ve moved the project from googlecode to github.

    You can download it from http://github.com/headjump/arrows-and-boxes/downloads or steal the code from here if you like ;)

    - Dennis

  • zing on 03 Mar 15:50

    hmm, it’s awesome..!!

    gud development!!

    keep in touch ea.

  • Davinci Emily on 09 Mar 22:08

    Hello Dennis, your post has been most helpful to me today…thanks so much. Davinci Emily 4791

  • Danny on 23 Mar 08:33

    Hi,

    very nice. Can you tell me if there is an option of making the boxes smaller? I need like 11 in a raw and it exits my page.

  • Rogelio on 05 Apr 18:53

    Hi Dennis,

    Great work.

    Is it possible to know which node I clicked?, or is it possible to add links instead of plain text?.

    Thank you.

  • Rogelio on 05 Apr 21:06

    Sorry,

    I just saw the HyperLink part. Ignore my last comment.

    Thanks again

  • Antonio on 14 Apr 12:25

    Hi Dennis, very nice, thanks!

    Just a question: I need to print the graph on paper, do you know how to print the lines and arrows?

    Thanks, Antonio

  • shesek on 19 Apr 18:00

    Excellent work, Dennis! Very useful for a website I’m building, thanks!

  • Mohit on 26 Apr 05:51

    Hi Dennis,awesome work !

    I have tried hard to create a multiple level hierarchy using the format above.But i just can’t seem to get it to work .Can you please let me know how that can be done(i.e if it can be done at all)?

  • Peter Ju on 14 May 05:06

    Thanks for your sharing, I like it very much and I have 2 reverse example

    (Start) > (login) – (-[a]) || (End) < (logout) < (a:)||

    (Start) > (login) – (>[p]) || () (p:Process) – (>[b]) || (End) < (b:logout)||

    Maybe can used in Demo, but the second example which looks strange…

  • Dennis on 17 May 21:14

    Hi Peter,

    your code looks odd in the preview editor and I figured out that the ”-” characters were no normal dashes but other characters that look pretty similar but have a different charcode. (Can be caused by the textformatter this site uses for comments). Was that what you meant?

    (Start) > (login) - (>[p]) || () (p:Process) - (>[b]) || (End) < (b:logout)||

  • Steve on 20 May 20:04

    This is pretty cool, but I wish there was a way for you to automatically figure out when there should be a new line. Like if I have: (fred:Fred) (mary:Mary < [bob]) (steve:Steve < [fred]) (frank:Frank < [bob]) (sue:Sue < [steve]) (bob:Bob < [fred])

    You would simply know that I want to have it be 3 lines, with Fred on a line by himself, Steve and Bob on the second line, and Frank, Mary and Sue on the third line. The way it is now I can’t really see using this to generate anything based on dynamic data.

  • Mario on 19 Jun 00:08

    hi, great work! and thx for sharing.

    i want to show the box nodes only by mouse over so i added this lines to the css-file:

    div.arrowsandboxes-node:hover div.arrowsandboxes-node-subtitle { display: block; }

    it works fine with ie9 and ff,but the box height seems to be a fixed value. and my box is still large without displaying the nodes. where can i search for this…? is it a js problem…?

    can anyone help please?

  • esteban on 21 Jul 14:17

    Hi! thxs for the plugin. It’s been really useful. I made a small modification to the code. I just added one special character (#) which generates no arrow (and leave no space) between two consecutive boxes.

    Ie: Standard mode: [blah-blah] -> [blah-blah] -> [blah-blah]

    Sharp Mode: blah-blah—> [blah-blah]

    In this way I can display Titles in one box and data in the other.

  • mark foley on 12 Sep 08:19

    Hi! This looks fantastic. A couple of thoughts: a) It’d be good to have some ‘OR’ functionality, so mark -> Bob or Joe, and it would have bob and joe in parallel. This would be very handy for workflows. Also (and I’ll look at the code to see how easy it would be), it’d be nice to have indicators in the text defining the style or icon – eg items ‘already approved’ might have a (!) in the text, which makes them become green and/or have a tick icon.

    Thanks for the plugin!

  • Aram on 18 Sep 11:33

    Hi Dennis, excelent work! But I don’t know why my deramveawer cs5 doesn’t recognize “arrows-and-boxes” class. And whey I write these code: 
    (Node1) > (Node2)
    it do nothing.(e.g/ it was just shown (Node1) > (Node2)).

  • Web Technos and Translation on 21 Sep 08:01

    This tool is awesome! The formalism is easy to learn and I can at last show inheritance principles without using ArgoUML and save its result as an image (plus the preview editor is a very useful tool). Thanks a lot for sharing. Well, I know I’m asking a lot, but… do you know another plugin to handle state diagrams with curved arrows?

  • pacool on 17 Oct 03:59

    Hi, how can i write HTML in the links?

    tks

  • pacool on 17 Oct 03:59

    Hi, how can i write HTML in the links?

    tks

  • Jose Hernandez on 19 Oct 05:08

    Hi

    I´m José Hernández from Panama (Central America) I just saw your plugin at the Joomla org website

    I was reading basic example and I would like to make a question what about if someone wants to place the following order

    nodo1 nodo2 nodo3 nodo4 nodo5 Nodo6

    It seem the line of nodes start from left to right… so I was wondering how about when someone needed to start the line with NO nodes?

    Thanx in advance

  • Gonzalo Ortellado on 27 Oct 17:33

    Great man! Excelente work!!

  • Mr Nobody on 01 Nov 09:25

    Thank you for your work Dennis… Just one question (that I´ve haven´t found on the documentation)... Is there any way to link two boxes to one box? (something like (a,b)>(c) where a and b are boxes.

    Thank you so much in advance.

  • bispginny on 06 Nov 04:40

    Hi! like you post: to my @vdoeopei twitter

  • Zachary Abresch on 11 Nov 18:34

    Hi. First off, your plugin is awesome! It could be the perfect solution to a page I’m building that has to diagrammatically output lineage trees for fraternity orders. I’m wondering how to add a custom class to nodes that are referenced by node_id’s. I’m using the following node syntax:

    @ (- [a]) – - (Top Node – [b]) – (-[c])|| (a:Node A) (b:Node B) (c:Node C) @

    and I’d like to be able to add classes to any of the id referenced nodes on the second line. How would I go about doing this?

  • anson on 15 Nov 09:22

    if can drag ?

    very perfect!

  • anson on 15 Nov 09:22

    if can drag ?

    very perfect!

  • @rgUm3n+ on 15 Dec 18:01

    I’m intrigued at what you have accomplished here. I’m going to give your code a whirl and see if I can figure out a way to feed data into a function for creating an organizational chart. If I come up with something that seems flexible I’ll send it on to you.

  • rodrick1966 on 24 Jan 09:26

    Trace next to my carriage movie, the histogram decide king linked to agape systems at the kumaramangalom temple. http://ebypaju.com

  • priyank on 01 Feb 00:36

    Can we add visibility on click feature? suppose we have node1 -> node2 The node2 box will be hidden, only node1 is visible, on-clicking node1 the node2 and the line are visible. can we have this behavior?

  • theghostofc on 03 Feb 08:33

    Is there a handy way to have tooltips (like HTML title attribute) for a node?

  • theghostofc on 03 Feb 08:34

    Is there a handy way to have tooltips (like HTML title attribute) for a node?

Post a comment