-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
198 lines (157 loc) · 7.31 KB
/
index.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.111.3">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/svg+xml" href="img/elk_fav.svg">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://www.eclipse.org/elk/css/elk.css">
<link rel="stylesheet" href="https://www.eclipse.org/elk/css/prism.css">
<title>Eclipse Layout Kernel (ELK)</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="https://www.eclipse.org/elk/">
<img src="img/elk_small_light.svg" height="30" class="d-inline-block align-top mr-1" alt="">
Eclipse Layout Kernel™
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./downloads.html">Downloads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./gettingstarted.html">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./documentation.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./reference.html">Reference</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./support.html">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./blog.html">Blog Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/eclipse/elk">GitHub</a>
</li>
</ul>
</div>
</nav>
<div class="container px-3 py-5">
<div class="container px-3 py-5">
<div class="row mb-3"><div class="col"><div class="jumbotron">
<h1 class="display-4 mb-2">
<img src="img/elk.svg" width="80" class="mr-3" style="display: inline-block; vertical-align: baseline;">Eclipse Layout Kernel™
</h1>
<p class="lead">
Ever feel like you spend most of your time getting a diagram’s layout right instead of its content?
</p>
<a href="https://rtsys.informatik.uni-kiel.de/elklive/" class="btn btn-success">Try it!</a>
<a href="./downloads.html" class="btn btn-info">Download</a>
<a href="./documentation.html" class="btn btn-warning">Documentation</a>
<a href="./support.html" class="btn btn-primary">Support</a>
<hr class="my-4">
<p class="lead">
Automatic Layout for Diagrams
</p>
<p>
The Eclipse Layout Kernel (or ELK) is two things:
a collection of layout algorithms,
and an infrastructure that bridges the gap
between layout algorithms and diagram viewers and editors.
</p>
<p>
The drawing below shows an example layout produced with ELK.
It also illustrates some of ELK's special features:
ports (edges' attachment points on the corresponding nodes' borders)
and hierarchical nodes (nodes that contain further nodes as children).
Note that ELK itself doesn't render the drawing
but only computes positions (and possibly dimensions) for the diagram elements.
</p>
<img class="img-fluid d-block mx-auto" src="./img/example_layout_complexRouter.svg" style="max-width: 900px;" alt="Example Layout">
<hr class="my-4">
<p class="lead">
Happy Users
</p>
<div class="row">
<div class="col-4">
<div class="card">
<img class="card-img-top img-fluid" src="./img/reel_klassviz.jpg" alt="KlassViz">
<div class="card-body">
<h4 class="card-title">KlassViz</h4>
<p class="card-text">
<a href="https://github.com/kieler/klassviz">KlassViz</a>
uses automatic layout to generate class diagrams in Eclipse on the fly.
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img-top img-fluid" src="./img/reel_debukviz.jpg" alt="DebuKViz">
<div class="card-body">
<h4 class="card-title">DebuKViz</h4>
<p class="card-text">
<a href="https://github.com/kieler/debukviz">DebuKViz</a>
uses automatic layout to generate visualizations of variables
in your Java programs while debugging.
</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<img class="card-img-top img-fluid" src="./img/reel_ptolemy.jpg" alt="Ptolemy II">
<div class="card-body">
<h4 class="card-title">Ptolemy II</h4>
<p class="card-text">
<a href="http://ptolemy.eecs.berkeley.edu/ptolemyII/index.htm">Ptolemy II</a>
uses automatic layout to make developing models graphically easier.
</p>
</div>
</div>
</div>
</div>
</div></div></div>
</div>
</div>
<footer role="contentinfo" class="footer">
<div class="container">
<div class="row">
<div class="col">
<span class="hidden-print">
<a href="https://www.eclipse.org"><img class="logo-eclipse-white img-responsive" alt="logo" src="./img/eclipse_foundation_logo.svg"/></a>
</span>
</div>
<div class="col">
</div>
</div>
<div class="row">
<div class="col hidden-print">
<a href="http://www.eclipse.org/">Eclipse Foundation</a><br/>
<a href="http://www.eclipse.org/legal/privacy.php">Privacy Policy</a><br/>
<a href="http://www.eclipse.org/legal/termsofuse.php">Website Terms of Use</a><br/>
<a href="http://www.eclipse.org/legal/copyright.php">Copyright Agent</a><br/>
<a href="http://www.eclipse.org/legal">Legal</a>
</div>
<div class="col">
<p class="copyright-text">Copyright © Eclipse Foundation, Inc. All Rights Reserved.</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://www.eclipse.org/elk/js/prism.js"></script>
<script>$(function() { $('table').addClass('table'); })</script>
</body>
</html>