-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathexamples.html
More file actions
209 lines (179 loc) · 5.3 KB
/
examples.html
File metadata and controls
209 lines (179 loc) · 5.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.wz_jsgraphics.js"></script>
<script type="text/javascript" src="js/arrowsandboxes.js"></script>
<link type="text/css" rel="stylesheet" href="style/arrowsandboxes.css">
</head>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
<body>
<h2>About</h2>
<p>
Easy to use javascript plugin to draw nice boxes and arrows to your website from simple markup like <code>(User) > (Admin)</code>
</p>
<p>... which will be transformed to:</p>
<pre class="arrows-and-boxes">
(User) > (Admin)
</pre>
<p>
<a class="arrowed" href="http://github.com/headjump/arrows-and-boxes" title="Arrows-and-boxes from Dennis Treder at Github">Get or fork it at Github!</a>
</p>
<p>
The following examples are no screenshots - they are dynamically created by Arrows-and-boxes with the code displayed above each example ;)
</p>
<h3>Setup (it's easy!)</h3>
<ol>
<li>
Put javascript links inside HTML head to <code>jquery.js, jquery.wz_jsgraphics.js, arrowsandboxes.js</code>
</li>
<li>
Put a css link inside HTML head to <code>arrowsandboxes.css</code>
</li>
<li>
<p>
Place a <pre> block around your arrows-and-boxes markup and set the class to <code>arrows-and-boxes</code>:
</p>
<p>
<strong><em> <pre class="arrows-and-boxes"></em> (User) > (Admin) <em></pre> </em></strong>
</p>
<p>
Arrows-and-boxes automatically detects the code and builds nice boxes and arrows from it.
</p>
</li>
</ol>
<h2>Basic example</h2>
<p>
Inline arrows and nodes:
</p>
<pre>
(Dennis) >likes (Food)
</pre>
<pre class="arrows-and-boxes">
(Dennis) >likes (Food)
</pre>
<ul>
<li>
Define a box with "( )", and a link with ">", "<", "-".
</li>
<li>
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)
</li>
<li>
Basic box format: <code>(box_title | box_subtitle)</code>
</li>
<li>
Complete box format: <code>(box_id{custom_class}: box_title | box_subtitle >arrow_label [arrow_target1, arrow_target2, ...] <arrow2_label [arrow2_target])</code>
</li>
</ul>
<h2>New lines</h2>
<p>
Nodes will be placed after each other in one line. Start a new line with "||".
</p>
<pre>
(Node1) (Node1_2) ||
(Node2) || (Node3)
</pre>
<pre class="arrows-and-boxes">
(Node1) (Node1_2) ||
(Node2) || (Node3)
</pre>
<h2>Different arrow types</h2>
<pre>
(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)
</pre>
<pre class="arrows-and-boxes">
(arrow) - (normal) ||
(arrow) > (one direction) ||
(arrow) < (other direction) ||
(arrow) <> (and back)
</pre>
<h2>Linking elswhere</h2>
<p>
Writing <code>(node_id: My Node)</code> 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
</p>
<pre>
(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)
</pre>
<pre class="arrows-and-boxes">
(Dennis >likes [d,m]) ||
(d:Drinks) (m:Money)
</pre>
<ul>
<li>
Arrows between boxes: <code>>arrow_label</code>
</li>
<li>
Arrows defined INSIDE a box: <code>>arrow_label [arrow_target1, arrow_target2, ...]</code>
</li>
</ul>
<h2>Want subtitles?</h2>
<p>
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.
</p>
<pre>
(Dennis|has a subtitle) > label | new line (node)
</pre>
<pre class="arrows-and-boxes">
(Dennis|has a subtitle) > label | new line (node)
</pre>
<h2>Highlight nodes and arrows!</h2>
<pre>
(boring) > (boring) >> ((Highlighted))
</pre>
<pre class="arrows-and-boxes">
(boring) > (boring) >> ((Highlighted))
</pre>
<h2>Use Dummy nodes to get more space</h2>
<p>
Defining a node without a title (= empty node) makes it a "Dummy node". It won't be visible, but gives some space.
</p>
<p>
Dummy nodes can also have ids and arrows, so you can acutally use them as arrow-targets and -sources.
</p>
<pre>
(Dennis) -likes () > (Food)
</pre>
<pre class="arrows-and-boxes">
(Dennis) -likes () > (Food)
</pre>
<h2>Use Dummy nodes to bend your arrows</h2>
<pre>
(Dennis) - (>likes[f]) ||
() (f:Food)
</pre>
<pre class="arrows-and-boxes">
(Dennis) - (>likes[f]) ||
() (f:Food)
</pre>
<h2>HTML in your texts</h2>
<p>
Put <code>{{ }}</code> around something let's you use HTML inside node titles, subtitles and arrow labels. So you can use anything you like (images and stuff).
</p>
<pre>
(Dennis) > links ({{<a href="http://www.headjump.de">headjump.de</a>}})
</pre>
<pre class="arrows-and-boxes">
(Dennis) >links ({{<a href="http://www.headjump.de">headjump.de</a>}})
</pre>
<h2>Custom classes for your nodes</h2>
<p>
Writing <code>{my_class_name}</code> 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:
</p>
<pre>
({custom_class}:Custom class)
</pre>
<pre class="arrows-and-boxes">
({custom_class}:Custom class)
</pre>
</body>
</html>