--{{0}}--
A template for including plantUML diagrams into LiaScript courses. See the following links for further information and documentation:
{{0-1}}
-
See the plantUML docs here...
-
See the Github version of this document here...
-
See the LiaScript version of this document here...
--{{1}}--
There are three ways to use this template. The easiest way is to use the
import statement and the URL of the raw text-file of the master branch or any
other branch or version. But you can also copy the required functionality
directly into the header of your Markdown document, see therefor the
last slide. And of course, you could also clone this project and change
it, as you wish.
{{1}}
-
Load the macros via
import: https://raw.githubusercontent.com/liascript-templates/plantUML/master/README.mdto import the latest version, but the API might change in the future, to load this specific version load:
import: https://github.com/LiaTemplates/plantUML/blob/0.0.10/README.md -
Copy the definitions into your Project
-
Clone this repository on GitHub
--{{0}}--
Simply call the macro @plantUML in block-notation, thus, directly within the
header of the code-block. The code block should contain the code for the UML
diagram. The code is then directly evaluated and translated into a plantUML-URL.
@startuml
Bob -> Alice : hello
@enduml
The default image type is svg, however, you can overwrite this or make it
explicit, by calling either @plantUML.png or @plantUML.svg. SVG might cause
some problems in some browsers.
@startuml
ditaa
Daten Daten
| |
| |
+--------------|---------------+ |
| +------+ | | | Funktionsauswahl
| | | | : | F_0 F_1 F_2
| | V V V V | | | Zielregister
| | +----+-----+-----+ +----+-----+-----+ | | | auswahl
| | |cBFB Register A | |cBFB Register B | | | | Z
| | +---+------------+ +---------+------+ | | | |
| | | | | | | |
| | | +------------------+ | | | |
| | | | | | | | |
| | +--------+-----------+ | | | | |
| | | | | | | | | |
| | V V V V | | | |
| | +----------------+ +----------------+ | | | |
| | |c808 |<- |c808 |<--+ | | |
| | | Demultiplexer |<- | Demultiplexer |<------+ | |
| | | |<- | |<----------+ |
| | ++-+-+-+-+-+-+-+-+ ++-+-+-+-+-+-+-+-+ |
| | | | | | | | | | | | | | | | | | |
| | | | | | | | | | V V V V V V V V |
| | | | | | | | | +----------------------------------+ |
| | | | | | | | +-----------------------------+ | |
| | | | | | | +------------------------+ | | |
| | | | | | +-------------------+ | | | |
| | | | | +--------------+ | | | | |
| | | | +---------+ | | | | | |
| | | +----+ | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | | | | | | | | | |
| | V V V V V V V V V V V V V V V V |
| | +----+ +----+ +----+ +----+ +----+ +----+ +----+ +----+ |
| | | 000| | 001| | 010| | 011| | 100| | 101| | 110| | 111| |
| | |cFF4| |cFF4| |cFF4| |cFF4| |cFF4| |cFF4| |cFF4| |cFF4| |
| | | OR | |AND | |EXOR| |ADD | |SUB | |MUL | |DIV | | SL | |
| | +-+--+ +-+--+ +-+--+ +-+--+ +-+--+ +-+--+ +-+--+ +-+--+ |
| | : : : : : : : : |
| | +------+------+------+---+--+------+------+------+ |
| | | |
| | V |
| | +----------+----------+ |
| | |cCCB DeMuxer/Selektor|<-----------------+
| | +---+-+---------------+
| | : : | |
| +---------------------+ | --+---+--+
| | | Status
+-------------------------+ v S
@enduml
--{{0}}--
Use a code-block with plantUML code and add the macro @plantUML.eval to the
end of that block to get and editor, which contains the code and by clicking
onto play, you trigger its evaluation. You have to pass the parameter svg or
png to tell service, wheather you want to have an svg or png image back. The
displayed URL is also the source of the image.
@startuml
abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection
List <|-- AbstractList
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList
class ArrayList {
Object[] elementData
size()
}
enum TimeUnit {
DAYS
HOURS
MINUTES
}
annotation SuppressWarnings
@enduml
@plantUML.eval(png)
--{{0}}--
The two main-macros make use of @plantUML.exec which receives two parameters.
The first one is a unique id and the second one contains the code.
script: https://cdn-0.plantuml.com/synchro2.min.js
@onload
window.cleanDitaa = function(code) {
const pattern = /@startuml\nditaa/g
if(code.match(pattern)) {
return code.replace(pattern, "@startditaa").replace(/@enduml/g, "@endditaa")
}
return code
}
@end
@plantUML: @plantUML.exec(svg,```@0```)
@plantUML.svg: @plantUML.exec(svg,```@0```)
@plantUML.png: @plantUML.exec(png,```@0```)
@plantUML.exec
<script run-once modify="false">
function draw(type, code, counter = 10) {
try {
let s = unescape(encodeURIComponent(window.cleanDitaa(code)));
var arr = [];
for (let i = 0; i < s.length; i++) {
arr.push(s.charCodeAt(i));
}
let compressor = new Zopfli.RawDeflate(arr);
let compressed = compressor.compress();
let dest = "https://www.plantuml.com/plantuml/" + type + "/" + encode64_(compressed);
setTimeout(function() {
send.lia("HTML: <img style='max-width: 100%' src='" + dest + "' onclick='window.LIA.img.click(\"" + dest + "\")'>")
}, 100)
} catch(e) {
if (counter > 0) {
setTimeout(function() {
draw(type, code, counter - 1)
}, 500)
} else {
send.lia("LIA: stop")
}
}
}
draw("@0", `@1`)
</script>
<span>
<img id="plant@0" src="@0" style="display:none">
</span>
@end
@plantUML.eval
<script>
function draw(type, code, counter = 10) {
try {
let s = unescape(encodeURIComponent(window.cleanDitaa(code)));
var arr = [];
for (let i = 0; i < s.length; i++) {
arr.push(s.charCodeAt(i));
}
let compressor = new Zopfli.RawDeflate(arr);
let compressed = compressor.compress();
let dest = "https://www.plantuml.com/plantuml/" + type + "/" + encode64_(compressed);
console.html("<img style='max-width: 100%' src='" + dest + "' onclick='window.LIA.img.click(\"" + dest + "\")'>")
console.log(dest)
send.lia("LIA: stop")
} catch(e) {
if (counter > 0) {
setTimeout(function() {draw(type, code, counter - 1)}, 100)
} else {
send.lia("LIA: stop")
}
}
}
draw("@0", `@input`)
""
</script>
@end --{{1}}--
If you want to minimize loading effort in your LiaScript project, you can also copy this code and paste it into your main comment header, see the code in the raw file of this document.
{{1}} https://raw.githubusercontent.com/liascript-templates/plantUML/master/README.md
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent