Embed html from drawio.com into wiki markmin

209 views
Skip to first unread message

Ben Lawrence

unread,
May 19, 2015, 1:02:41 AM5/19/15
to web...@googlegroups.com
HI
drawio.com allows you to draw diagrams and export them. One format is html with a javascript. An example is

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>AEMdatabase</title>
</head>
<body>
<div class="mxgraph" style="position:relative;overflow:auto;width:100%;">
<div style="width:1px;height:1px;overflow:hidden;">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</div>
</div>
<script type="text/javascript" src="https://www.draw.io/js/embed-static.min.js"></script>
</body>
</html>

How could I embed this into the markmin page of web2py's included wiki engine so that it would generate the drawing?
Thanks in advance...

Massimo Di Pierro

unread,
May 20, 2015, 9:19:44 AM5/20/15
to web...@googlegroups.com, benla...@gmail.com
For security reasons markmin does not allow scripts but you can embed this in your own view:

<script type="text/javascript" src="https://www.draw.io/js/embed-static.min.js"></script>

So the only problem is allowing users to generate 

<div class="mxgraph">...</div>

You can do it in markmin with

``...``:mxgraph

You have to handle the style in your own CSS.

Alternatively look into http://experts4solutions.com/markmin2 (markmin.js) This one will allow you cut and paste the html directly in the markmin and has an option (in JS) to allow <scripts>.

Ben Lawrence

unread,
May 21, 2015, 12:05:43 AM5/21/15
to web...@googlegroups.com
Thanks! 
I did as you suggested (without adding the styles as I need to go to CSS school to know how) and all I ended up with was the long ASCII thing being displayed in a nicer font. But you know what? It's easier just to screen capture the diagram and add it in as a 'media' in the wiki! 
Seriously, thanks to you and all the developers for web2py, it really is awesome.
Reply all
Reply to author
Forward
0 new messages