mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-31 02:44:17 +01:00
80 lines
2.0 KiB
HTML
80 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../../dist/mermaid.js"></script>
|
|
<link rel="stylesheet" href="../../dist/mermaid.css"/>
|
|
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
|
|
|
<style>
|
|
.cluster {
|
|
fill: #fcac93;
|
|
rx: 4px;
|
|
stroke: grey;
|
|
}
|
|
|
|
.cssClass > rect {
|
|
fill: #FF0000;
|
|
stroke: #FFFF00;
|
|
stroke-width: 4px;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
|
|
</head>
|
|
<body style="height:100%">
|
|
<h1>Rendering</h1>
|
|
A should have a red background with styling from class.
|
|
|
|
<script>
|
|
mermaidAPI.initialize({
|
|
startOnLoad: true,
|
|
logLevel: 1
|
|
});
|
|
|
|
</script>
|
|
<div class="mermaid" style="height:500px;">
|
|
classDiagram
|
|
Class01 <|-- AveryLongClass : Cool
|
|
Class03 *-- Class04
|
|
Class05 o-- Class06
|
|
Class07 .. Class08
|
|
Class09 --> C2 : Where am i?
|
|
Class09 --* C3
|
|
Class09 --|> Class07
|
|
Class07 : equals()
|
|
Class07 : Object[] elementData
|
|
Class01 : size()
|
|
Class01 : int chimp
|
|
Class01 : int gorilla
|
|
Class08 <--> C2: Cool label
|
|
</div>
|
|
|
|
|
|
<svg id="mermaidChart10" style="display:none" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
|
|
<style type="text/css" title="mermaid-svg-internal-css">/* */
|
|
text {
|
|
font-family: 'trebuchet ms', verdana, arial;
|
|
font-size: 14px;
|
|
}
|
|
|
|
text {
|
|
font-family: 'trebuchet ms', verdana, arial;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* */
|
|
</style>
|
|
<g transform="translate(0,0)">
|
|
<rect x="0" y="0" fill="yellow" width="115.5625" height="26.65625"></rect>
|
|
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
|
|
</g>
|
|
<g transform="translate(200,0)">
|
|
<rect rx="0" ry="0" fill="grey" width="115.5625" height="26.65625"></rect>
|
|
<text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
|
|
</g>
|
|
</svg>
|
|
|
|
</body>
|
|
</html>
|