Skip to content

Commit c88f5cf

Browse files
aldergalderg
committed
Uses embed.diagrams.net
1 parent b27dc42 commit c88f5cf

5 files changed

+126
-125
lines changed

‎README.md

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
# Draw.io GitHub Integration
1+
# diagrams.net GitHub Integration
22

3-
Please read <a href="https://github.com/jgraph/drawio-html5" target="_blank">this</a> for a high-level introduction.
3+
Please read <a href="https://github.com/jgraph/drawio-integration" target="_blank">this</a> for a high-level introduction.
44

5-
GitHub support is now available https://www.draw.io/?mode=github
5+
GitHub support is now available https://app.diagrams.net/?mode=github
66

7-
An example for integration into GitHub wikis is available here: https://github.com/jgraph/draw.io/wiki/Embed-Diagrams!
7+
An example for integration into GitHub wikis is available here: https://github.com/jgraph/drawio/wiki/Embed-Diagrams
88

99
--
1010

11+
https%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-libs%2Fmaster%2Flibs%2Ftemplates.xml
12+
1113
![Diagram](http://jgraph.github.io/drawio-github/diagram.png)
1214

13-
<a href="http://jgraph.github.io/drawio-github/edit-diagram.html?repo=drawio-github&path=diagram.png" target="_blank">Edit</a> | <a href="https://www.draw.io/#Uhttps%3A%2F%2Fjgraph.github.io%2Fdrawio-github%2Fdiagram.png" target="_blank">Edit As New</a>
15+
<a href="http://jgraph.github.io/drawio-github/edit-diagram.html?repo=drawio-github&path=diagram.png" target="_blank">Edit</a> | <a href="https://app.diagrams.net/#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fjgraph%2Fdrawio-github%2Fmaster%2Fdiagram.png" target="_blank">Edit As New</a>
1416

15-
<a href="http://jgraph.github.io/drawio-github/edit-diagram.html" target="_blank">edit-diagram.html</a> does the I/O with GitHub and uses draw.io in embed mode for diagram editing. The page supports the following URL parameters: user, pass, repo, path, ref and action=open (the Edit link above is an example). Using action=open, links for immediate diagram editing in GitHub can be created (requires user and pass parameters). You can also use files on GitHub as templates in draw.io via the url parameter (see Edit As New above).
17+
<a href="http://jgraph.github.io/drawio-github/edit-diagram.html" target="_blank">edit-diagram.html</a> does the I/O with GitHub and uses diagrams.net in embed mode for diagram editing. The page supports the following URL parameters: user, pass, repo, path, ref and action=open (the Edit link above is an example). Using action=open, links for immediate diagram editing in GitHub can be created (requires user and pass parameters). You can also use files on GitHub as templates in diagrams.net via the url parameter (see Edit As New above).
1618

1719
Supported file formats: .png, .svg, .html and .xml (default)
1820

@@ -25,4 +27,3 @@ Supported file formats: .png, .svg, .html and .xml (default)
2527
## Self-editing HTML file
2628

2729
<a href="http://jgraph.github.io/drawio-github/self-editing.html" target="_blank">self-editing.html</a> is a HTML file with embedded diagrams. The file uses nanocms.js for GitHub I/O and diagram editing, and Bootstrap and nanocms.css for some fancy CSS styles. HTML is used as a container for mutiple diagrams in different formats, including inline SVG with links.
28-

‎edit-diagram.html

+29-29
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@
1515
}
1616
</style>
1717
<script type="text/javascript">
18-
var editor = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
18+
var editor = 'https://embed.diagrams.net/?embed=1&ui=atlas&spin=1&proto=json';
1919

2020
var urlParams = (function()
2121
{
2222
var result = new Object();
2323
var params = window.location.search.slice(1).split('&');
24-
24+
2525
for (var i = 0; i < params.length; i++)
2626
{
2727
idx = params[i].indexOf('=');
28-
28+
2929
if (idx > 0)
3030
{
3131
result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
3232
}
3333
}
34-
34+
3535
return result;
3636
})();
3737

@@ -45,7 +45,7 @@
4545
window.removeEventListener('message', receive);
4646
document.body.removeChild(iframe);
4747
};
48-
48+
4949
var save = function(data)
5050
{
5151
iframe.contentWindow.postMessage(JSON.stringify(
@@ -54,15 +54,15 @@
5454
message: 'Saving',
5555
show: 1
5656
}), '*');
57-
57+
5858
callback(data, function(success)
5959
{
6060
iframe.contentWindow.postMessage(JSON.stringify(
6161
{
6262
action: 'spinner',
6363
show: 0
6464
}), '*');
65-
65+
6666
if (success)
6767
{
6868
close();
@@ -75,7 +75,7 @@
7575
if (evt.data.length > 0)
7676
{
7777
var msg = JSON.parse(evt.data);
78-
78+
7979
if (msg.event == 'init')
8080
{
8181
if (content == null)
@@ -118,7 +118,7 @@
118118
if ((/\.(png|svg|html)$/i).test(path))
119119
{
120120
var ext = path.substring(path.lastIndexOf('.') + 1);
121-
121+
122122
// Additional export step required for PNG, SVG and HTML
123123
iframe.contentWindow.postMessage(JSON.stringify(
124124
{
@@ -144,7 +144,7 @@
144144
iframe.setAttribute('src', editor);
145145
document.body.appendChild(iframe);
146146
};
147-
147+
148148
function xhr(verb, url, data, callback)
149149
{
150150
var req = new XMLHttpRequest();
@@ -155,52 +155,52 @@
155155
callback(req);
156156
}
157157
};
158-
158+
159159
req.open(verb, url, true);
160-
160+
161161
var username = document.getElementById('username').value;
162162
var pass = document.getElementById('password').value;
163163
req.setRequestHeader('Authorization', 'Basic ' +
164164
btoa(username + ':' + pass));
165-
165+
166166
req.send(data);
167167
}
168-
168+
169169
function readFile()
170170
{
171171
var button = document.getElementById('button');
172172
var prev = button.innerHTML;
173173

174174
button.setAttribute('disabled', 'disabled');
175175
button.innerHTML = 'Loading...';
176-
176+
177177
var org = document.getElementById('org').value;
178178
var repo = document.getElementById('repo').value;
179179
var path = document.getElementById('path').value;
180180
var ref = document.getElementById('ref').value;
181181
var url = 'https://api.github.com/repos/' + org + '/' + repo +
182182
'/contents/' + path + '?ref=' + encodeURIComponent(ref);
183-
183+
184184
xhr('GET', url, null, function(req)
185185
{
186186
button.removeAttribute('disabled');
187187
button.innerHTML = prev;
188-
188+
189189
var obj = JSON.parse(req.responseText);
190190
var filename = path;
191191
var slash = filename.lastIndexOf('/');
192-
192+
193193
if (slash >= 0)
194194
{
195195
filename = filename.substring(slash + 1);
196196
}
197-
197+
198198
if (req.status == 200 || req.status == 404)
199199
{
200200
edit(path, obj.content, function(data, fn, iframe)
201201
{
202202
var msg = prompt('Commit Message', 'Update ' + filename);
203-
203+
204204
writeFile(url, path, obj.sha, msg || '', data, fn);
205205
});
206206
}
@@ -210,21 +210,21 @@
210210
}
211211
});
212212
};
213-
213+
214214
function writeFile(url, path, sha, msg, content, fn)
215215
{
216216
var entity =
217217
{
218218
path: path,
219219
message: msg,
220220
content: content
221-
};
222-
221+
};
222+
223223
if (sha != null)
224224
{
225225
entity.sha = sha;
226226
}
227-
227+
228228
xhr('PUT', url, JSON.stringify(entity), function(req)
229229
{
230230
if (req.readyState == 4)
@@ -240,7 +240,7 @@
240240
}
241241
});
242242
};
243-
243+
244244
function onload()
245245
{
246246
document.getElementById('username').value = urlParams['user'] || '';
@@ -249,19 +249,19 @@
249249
document.getElementById('repo').value = urlParams['repo'] || '';
250250
document.getElementById('path').value = urlParams['path'] || '';
251251
document.getElementById('ref').value = urlParams['ref'] || 'master';
252-
252+
253253
document.getElementById((urlParams['username'] == null) ?
254254
'username' : ((urlParams['password'] == null) ?
255255
'password' : 'button')).focus();
256-
256+
257257
document.addEventListener('keydown', function(evt)
258258
{
259259
if (evt.keyCode == 13)
260260
{
261261
document.getElementById('button').click();
262262
}
263263
});
264-
264+
265265
if (urlParams['action'] == 'open')
266266
{
267267
document.getElementById('button').click();
@@ -284,6 +284,6 @@ <h2>Diagrams for GitHub</h2>
284284
</td></tr>
285285
</table>
286286
<br>
287-
Powered by <a href="https://www.draw.io" target="_blank">draw.io</a>
287+
Powered by <a href="https://www.diagrams.net" target="_blank">diagrams.net</a>
288288
</body>
289289
</html>

0 commit comments

Comments
 (0)