Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
JQuery 集成

想象一下，您可以直接将 PlantUML 源代码转换成 HTML，比如：

然后就可以显示这个了：

🎉 Copied!

@startuml class foo @enduml

那么，使用JQuery库就可以了。您只需在 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>

jquery.js 、和这 3 个文件在服务器上必须有。jquery_plantuml.js rawdeflate.js

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
完整的源码实例

<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>

Edit in DokuwikiEdit in AsciidocEdit in MarkdownJQuery 集成

Edit in DokuwikiEdit in AsciidocEdit in MarkdownHow does it works?

Edit in DokuwikiEdit in AsciidocEdit in Markdown完整的源码实例

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
JQuery 集成

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

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
完整的源码实例