/
FlowchartCreation.html
181 lines (134 loc) · 8.75 KB
/
FlowchartCreation.html
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
<!DOCTYPE html>
<html lang="en" data-content_root="./">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flowchart Creation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css?v=fa44fd50" />
<link rel="stylesheet" type="text/css" href="_static/bootstrap-sphinx.css?v=fadd4351" />
<link rel="stylesheet" type="text/css" href="_static/custom.css?v=77160d70" />
<script src="_static/documentation_options.js?v=30d551ce"></script>
<script src="_static/doctools.js?v=9a2dae69"></script>
<script src="_static/sphinx_highlight.js?v=dc90522c"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Visual Studio Build Impact" href="VisualStudioBuildImpact.html" />
<link rel="prev" title="Profiling with Valgrind" href="ProfilingWithValgrind.html" />
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59110517-1', 'auto');
ga('send', 'pageview');
</script>
</head><body>
<div id="navbar" class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.mantidproject.org">
</a>
<span class="navbar-text navbar-version pull-left"><b>master</b></span>
</div>
<div class="collapse navbar-collapse nav-collapse">
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><a href="index.html">Home</a></li>
<li><a href="https://download.mantidproject.org">Download</a></li>
<li><a href="https://docs.mantidproject.org">User Documentation</a></li>
<li><a href="http://www.mantidproject.org/contact">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-right" action="search.html" method="get">
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search" />
</div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<p>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="nav-item nav-item-0"><a href="index.html">Documentation</a> »</li>
<li class="nav-item nav-item-this"><a href="">Flowchart Creation</a></li>
</ul>
</div> </p>
</div>
<div class="container">
<div class="row">
<div class="body col-md-12 content" role="main">
<section id="flowchart-creation">
<span id="flowchartcreation"></span><h1>Flowchart Creation<a class="headerlink" href="#flowchart-creation" title="Link to this heading">¶</a></h1>
<p>The flowchart diagrams are created by writing <code class="docutils literal notranslate"><span class="pre">graphviz</span></code> .dot files that describe the diagram in plain text, and placing them into <code class="docutils literal notranslate"><span class="pre">docs/source/diagrams</span></code>. These can then be rendered in documentation by using the diagram directive in an .rst file:</p>
<div class="highlight-rest notranslate"><div class="highlight"><pre><span></span><span class="p">..</span> <span class="ow">diagram</span><span class="p">::</span> AlgorithmName-v1_wkflw.dot
</pre></div>
</div>
<p>Examples of this can be found in <a class="reference external" href="https://raw.githubusercontent.com/mantidproject/mantid/master/docs/source/algorithms/ReflectometryReductionOne-v1.rst">ReflectometryReductionOne1.rst</a> and <a class="reference external" href="https://raw.githubusercontent.com/mantidproject/mantid/master/docs/source/algorithms/ReflectometryReductionOneAuto-v1.rst">ReflectometryReductionOneAuto-v1.rst</a>.</p>
<p>The .dot format is quite simple¸ but very powerful for describing graphs. The approach we use is to describe all the nodes (shapes) we want first, grouping them into their types, and then defining how they’re connected.</p>
<p>To provide a uniform look to all the workflow diagrams, templated keywords are provided which are swapped out with the correct styling options when the documentation is built. They are of the form <code class="docutils literal notranslate"><span class="pre">${context}_style</span></code>. They’re defined by the <a class="reference external" href="https://raw.githubusercontent.com/mantidproject/mantid/master/docs/sphinxext/mantiddoc/directives/diagram.py">diagram directive</a>.</p>
<p>An algorithm that takes one input workspace and scales it by a given parameter/property if it was given, may look like this:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>digraph DiagramName {
//Comments are inserted in the same way as C++
label = "MultiplyByParam Workflow Diagram"
$global_style
subgraph params {
//These keywords beginning with $ are replaced with commands to style all the nodes in the subgraph correctly
$param_style
inputWorkspace [label="InputWorkspace"]
outputWorkspace [label="OutputWorkspace"]
coefficient [label="Coefficient"]
}
subgraph decisions {
$decision_style
checkCoefficient [label="Was Coefficient\ngiven?"]
}
subgraph algorithms {
$algorithm_style
scale [label="Scale"]
}
//Define the connections, labelling some of them
inputWorkspace -> checkCoefficient
coefficient -> scale [label="Factor"]
checkCoefficient -> scale [label="Yes"]
checkCoefficient -> outputWorkspace [label="No"]
scale -> outputWorkspace
}
</pre></div>
</div>
<p>While creating the diagrams it’s inconvenient to recompile the documentation with each change, so you may want to render the graph manually. This can be achieved on linux or cygwin by running the following command. <em>You may need to comment out the “$foo_style” lines when manually rendering as they are not valid graphviz syntax</em> (you can do this on the fly using sed to avoid having to edit the file).</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">dot</span> <span class="o">-</span><span class="n">Tpng</span> <span class="o">-</span><span class="n">o</span> <span class="n">output_image</span><span class="o">.</span><span class="n">png</span> <span class="n">input_file</span><span class="o">.</span><span class="n">dot</span> <span class="c1"># render a graph manually</span>
<span class="n">sed</span> <span class="s1">'s/\$/\/\/$/g'</span> <span class="n">input_file</span><span class="o">.</span><span class="n">dot</span> <span class="o">|</span> <span class="n">dot</span> <span class="o">-</span><span class="n">Tpng</span> <span class="o">-</span><span class="n">o</span> <span class="n">output_image</span><span class="o">.</span><span class="n">png</span> <span class="c1"># excludes $foo_style lines</span>
</pre></div>
</div>
<p>You can also render them in a web browser using this <a class="reference external" href="http://www.webgraphviz.com/">online graph renderer</a>.</p>
</section>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<ul class="nav navbar-nav" style=" float: right;">
<li>
<a href="ProfilingWithValgrind.html" title="Previous Chapter: Profiling with Valgrind"><span class="glyphicon glyphicon-chevron-left visible-sm"></span><span class="hidden-sm hidden-tablet">« Profiling wit...</span>
</a>
</li>
<li>
<a href="VisualStudioBuildImpact.html" title="Next Chapter: Visual Studio Build Impact"><span class="glyphicon glyphicon-chevron-right visible-sm"></span><span class="hidden-sm hidden-tablet">Visual Studio... »</span>
</a>
</li>
<li><a href="#">Back to top</a></li>
</ul>
<p>
</p>
</div>
</footer>
</body>
</html>