jointjs
Version:
JavaScript diagramming library
189 lines (148 loc) • 7.22 kB
HTML
<html>
<head>
<link rel="canonical" href="http://www.jointjs.com/" />
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/tutorial.css" />
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
<link rel="stylesheet" href="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css">
<link rel="stylesheet" href="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css">
<!-- Dependencies: -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
<script type="text/javascript" src="../build/joint.min.js"></script>
<title>JointJS - JavaScript diagramming library - Getting started.</title>
</head>
<body class="language-javascript tutorial-page">
<script>
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
</script>
<div class="tutorial">
<h2>Installation</h2>
<p><a href="hello-world.html">In the first part of the tutorial, we saw a working example of a
simple JointJS application:</a></p>
<div class="paper" id="paper-hello-world"></div>
<p>In this section, we will learn how to install JointJS and include it on our page.</p>
<p>For your JointJS application to run, the JointJS library and its dependencies have to be included in the
source HTML of your page.
Our initial example used a CDN to link to the required source files for JointJS, jQuery, Lodash and
Backbone:</p>
<pre class="line-numbers" data-line="4,11-14"><code><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.1/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.3.1/joint.js"></script>
<!-- code -->
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
</script>
</body>
</html></code></pre>
<p>If you do not wish to use a CDN, you can install JointJS locally instead.
Assuming that you have <a href="https://www.npmjs.com/package/npm">NPM</a> installed on your system, run
the following command in the command line (Terminal/Command Prompt):
<pre><code>npm install --save jointjs</code></pre>
<p>You can then find all the required source files in their respective folders inside the generated
<code>node_modules</code> folder.
The code segment would then look like the following (this is the form used in JointJS demos):</p>
<pre class="line-numbers" data-line="4,11-14"><code><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/jointjs/dist/joint.js"></script>
<!-- code -->
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
</script>
</body>
</html></code></pre>
<p>JointJS source code: <a href="js/hello-world.js" target="_blank">hello-world.js</a></p>
<p>Now that JointJS is included on our page, we can start building our diagram.</p>
<p><a href="graph-and-paper.html">As a next step, we need to create a graph and assign it to a
paper.</a></p>
</div><!--end tutorial-->
<script src="../node_modules/prismjs/prism.js"></script>
<script src="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"></script>
<script src="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js"></script>
<script src="js/hello-world.js"></script>
</body>
</html>