1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
2
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
5
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6
<meta name="generator" content="AsciiDoc 8.5.2" />
7
<link rel="stylesheet" href="./xhtml11.css" type="text/css" />
8
<link rel="stylesheet" href="./xhtml11-quirks.css" type="text/css" />
9
<link rel="stylesheet" href="./layout1.css" type="text/css" />
10
<script type="text/javascript">
12
window.onload = function(){asciidoc.footnotes();}
15
<script type="text/javascript" src="./asciidoc-xhtml11.js"></script>
16
<title>Graphviz filter for AsciiDoc</title>
18
<body style="max-width:70em">
19
<div id="layout-banner">
20
<div id="layout-title">AsciiDoc</div>
21
<div id="layout-description">Text based document generation</div>
26
<div>»<a href="index.html">Home</a></div>
27
<div>»<a href="manpage.html">Man Page</a></div>
28
<div>»<a href="userguide.html">User Guide</a></div>
29
<div>»<a href="INSTALL.html">Installation</a></div>
30
<div>»<a href="faq.html">FAQ</a></div>
31
<div>»<a href="a2x.1.html">a2x</a></div>
32
<div>»<a href="asciidocapi.html">API</a></div>
33
<div>»<a href="http://powerman.name/doc/asciidoc">Cheatsheet</a></div>
34
<div>»<a href="testasciidoc.html">Tests</a></div>
35
<div>»<a href="CHANGELOG.html">ChangeLog</a></div>
36
<div>»<a href="support.html">Support</a></div>
37
<div id="page-source">»<a href="asciidoc-graphviz-sample.txt">Page Source</a></div>
40
<div id="layout-content">
42
<h1>Graphviz filter for AsciiDoc</h1>
46
<div class="sectionbody">
47
<div class="paragraph"><p>Author: Gouichi Iisaka</p></div>
48
<div class="paragraph"><p>Version: 1.1.3</p></div>
51
<h2 id="_introduction">Introduction</h2>
52
<div class="sectionbody">
53
<div class="paragraph"><p>The Graphviz(<a href="http://www.graphviz.org">http://www.graphviz.org</a>) is a way of representing structural information
54
as diagrams of abstract graphs and networks.</p></div>
55
<div class="paragraph"><p>Automatic graph drawing has many important applications
56
in software engineering, database and web design, networking,
57
and in visual interfaces for many other domains.</p></div>
58
<div class="paragraph"><p>Graphviz take descriptions of graphs in a simple text language,
59
And has many useful features for concrete diagrams,
60
such as options for colors, fonts, tabular node layouts,
61
line styles, hyperlinks, and custom shapes.</p></div>
62
<div class="paragraph"><p>AsciiDoc can external shell commands used to process Paragraph and
63
DelimitedBlock content by Filter.</p></div>
64
<div class="paragraph"><p>So now, AsciiDoc can draw graphs via graphviz filter.</p></div>
66
<h2 id="_examples">Examples</h2>
67
<div class="sectionbody">
68
<h3 id="_simple">Simple</h3><div style="clear:left"></div>
69
<div class="listingblock">
71
<pre><tt> ["graphviz", "sample1.png"]
72
---------------------------------------------------------------------
73
digraph G { rankdir=LR; Graphviz->AsciiDoc->HTML}
74
---------------------------------------------------------------------</tt></pre>
76
<div class="imageblock">
78
<img src="sample1.png" alt="sample1.png" />
81
<h3 id="_using_options">Using options</h3><div style="clear:left"></div>
82
<div class="listingblock">
84
<pre><tt> ["graphviz", "sample2.png"]
85
---------------------------------------------------------------------
88
node [shape = circle];
89
0 [ style = filled, color=lightgrey ];
90
2 [ shape = doublecircle ];
91
0 -> 2 [ label = "a " ];
92
0 -> 1 [ label = "other " ];
93
1 -> 2 [ label = "a " ];
94
1 -> 1 [ label = "other " ];
95
2 -> 2 [ label = "a " ];
96
2 -> 1 [ label = "other " ];
97
"Machine: a" [ shape = plaintext ];
99
---------------------------------------------------------------------</tt></pre>
101
<div class="imageblock">
102
<div class="content">
103
<img src="sample2.png" alt="sample2.png" />
106
<h3 id="_using_layout">Using Layout</h3><div style="clear:left"></div>
107
<div class="listingblock">
108
<div class="content">
109
<pre><tt> ["graphviz", "sample3.png", "dot"]
110
---------------------------------------------------------------------
111
digraph finite_state_machine {
114
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
115
node [shape = circle];
116
LR_0 -> LR_2 [ label = "SS(B)" ];
117
LR_0 -> LR_1 [ label = "SS(S)" ];
118
LR_1 -> LR_3 [ label = "S($end)" ];
119
LR_2 -> LR_6 [ label = "SS(b)" ];
120
LR_2 -> LR_5 [ label = "SS(a)" ];
121
LR_2 -> LR_4 [ label = "S(A)" ];
122
LR_5 -> LR_7 [ label = "S(b)" ];
123
LR_5 -> LR_5 [ label = "S(a)" ];
124
LR_6 -> LR_6 [ label = "S(b)" ];
125
LR_6 -> LR_5 [ label = "S(a)" ];
126
LR_7 -> LR_8 [ label = "S(b)" ];
127
LR_7 -> LR_5 [ label = "S(a)" ];
128
LR_8 -> LR_6 [ label = "S(b)" ];
129
LR_8 -> LR_5 [ label = "S(a)" ];
131
---------------------------------------------------------------------</tt></pre>
133
<div class="imageblock">
134
<div class="content">
135
<img src="sample3.png" alt="sample3.png" />
139
<h2 id="_layout">Layout</h2>
140
<div class="sectionbody">
141
<div class="paragraph"><p>Layout for graphviz as follows. The default is ‘dot’.</p></div>
142
<div class="dlist"><dl>
148
<em>dot</em> draws directed graphs.
149
It works well on DAGs and other graphs that can be drawn as hierarchies.
150
It reads attributed graph files and writes drawings.
158
<em>neato</em> draws undirected graphs using ‘‘spring'' models (see Kamada and
159
Kawai, Information Processing Letters 31:1, April 1989).
160
Input files must be formatted in the dot attributed graph language.
168
<em>twopi</em> draws graphs using a radial layout (see G. Wills, Symposium on
169
Graph Drawing GD’97, September, 1997).
170
Basically, one node is chosen as the center and put at the origin.
171
The remaining nodes are placed on a sequence of concentric circles
172
centered about the origin, each a fixed radial distance from
181
<em>circo</em> draws graphs using a circular layout (see Six and Tollis, GD '99
182
and ALENEX '99, and Kaufmann and Wiese, GD '02.)
183
The tool identifies biconnected components and draws the nodes
184
of the component on a circle.
185
The block‐cutpoint tree is then laid out using a recursive radial
187
Edge crossings within a circle are minimized by placing as
188
many edges on the circle’s perimeter as possible.
189
In particular, if the component is outerplanar,
190
the component will have a planar layout.
198
<em>fdp</em> draws undirected graphs using a ‘‘spring'' model.
199
It relies on a force‐directed approach in the spirit of Fruchterman
201
(cf. Software‐Practice & Experience 21(11), 1991, pp. 1129‐1164).
207
<div id="footnotes"><hr /></div>
209
<div id="footer-text">
211
Last updated 2009-12-07 17:24:46 NZDT
213
<div id="footer-badges">
214
<a href="http://validator.w3.org/check?uri=referer">
215
<img style="border:0;width:88px;height:31px"
216
src="http://www.w3.org/Icons/valid-xhtml11-blue"
217
alt="Valid XHTML 1.1" height="31" width="88" />
219
<a href="http://jigsaw.w3.org/css-validator/">
220
<img style="border:0;width:88px;height:31px"
221
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
224
<a href="http://www.mozilla.org/products/firefox/">
225
<img style="border:none; width:110px; height:32px;"
226
src="http://www.spreadfirefox.com/community/images/affiliates/Buttons/110x32/safer.gif"
227
alt="Get Firefox!" />
added
removed
examples/website/asciidoc-graphviz-sample.html
