Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
JQuery integration

Imagine that you could directly use PlantUML source code into HTML, something like:

And that will display this:

🎉 Copied!

@startuml class foo @enduml

This would be nice.

Well, using JQuery library, this will work.

You just have to use the following header in your html file:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="[[jquery_plantuml.js|jquery_plantuml.js]]"></script>
<!-- rawdeflate.js is implicity used by jquery_plantuml.js -->
</head>

The 3 files jquery.js, jquery_plantuml.js and rawdeflate.js have to be available on your server.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
How does it works?

There is nothing magic here:

JQuery simply parses the html source file on loading,
Then all uml descriptions are transformed into links to plantuml.com site. (like for Javascript integration.)

And you can download the complete package here.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Complete source example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="[[jquery_plantuml.js|jquery_plantuml.js]]"></script>
<!-- rawdeflate.js is implicity used by jquery_plantuml.js -->
</head>

<body>
<p>Example</p>
<hr>
<img uml="
class foo
">
<hr>
<img uml="
class foo
">

</body>
</html>

How does it works?
Complete source example

Edit in DokuwikiEdit in AsciidocEdit in MarkdownJQuery integration

Edit in DokuwikiEdit in AsciidocEdit in MarkdownHow does it works?

Edit in DokuwikiEdit in AsciidocEdit in MarkdownComplete source example

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
JQuery integration

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
How does it works?

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Complete source example