GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity
mermaid/test/web_style.svg
Björn Weström f656269a50 Improved class styling for nodes 
Added unit testing
classDefs are now exported to the common style of the SVG
Styling is no longer copied from other mermaid SVGs on the same webpage
2014-12-14 22:15:47 +01:00

10 lines
11 KiB
XML
Raw Blame History

<svg height="318" id="mermaidChart0" width="1689.5" xmlns="http://www.w3.org/2000/svg"><style title="mermaid-svg-internal-css" type="text/css">/* <![CDATA[ */
.node { fill:#eaeaea; stroke:#666; stroke-width:1.5px; }
.node-square { stroke-width: 4px; stroke: rgb(51, 153, 51); fill: rgb(153, 153, 0); font-weight: 300; font-family: "Helvetica Neue",Helvetica,Arial,sans-serf; font-size: 14px; }
.node-odd-override { stroke-width: 3.5px; stroke: rgb(51, 153, 0); fill: rgb(0, 153, 153); }
.node-odd-override { fill:#BB00BB; stroke:#666622; }
.node-cyr { fill:#BB0099; stroke:#666622; }
.node-e1 { fill:#990066; stroke:#666622; }
.node-e2 { fill:#990066; stroke:#666622; }
/* ]]> */
</style><g><g class="output"><g class="clusters"></g><g class="edgePaths"><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead14)" d="M71.5,143.5L71.5,234L126.5561797752809,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead14"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead15)" d="M267.5,209L267.5,234L212.4438202247191,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead15"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead16)" d="M487,143.5L487,234L487,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead16"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead17)" d="M721,154L720.5,234L785.5280898876405,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead17"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead18)" d="M952,143.5L952,234L886.9719101123595,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead18"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead19)" d="M1136,175.5L1136,234L1274.5,267.4959239130435" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead19"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead20)" d="M1320,153.5L1320,234L1320,259" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead20"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g><g style="opacity: 1;" class="edgePath"><path style="stroke: #333; stroke-width: 1.5px;fill:none" marker-end="url(#arrowhead21)" d="M1556.75,163.5L1556.25,234L1365.5,269.92962962962963" class="path"></path><defs><marker orient="auto" markerHeight="6" markerWidth="8" markerUnits="strokeWidth" refY="5" refX="9" viewBox="0 0 10 10" id="arrowhead21"><path style="fill: #333" d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs></g></g><g class="edgeLabels"><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g transform="" style="opacity: 1;" class="edgeLabel"><g class="label" transform="translate(0,0)"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(71.5,114.5)" id="noc" style="opacity: 1;" class="node"><rect height="58" width="103" y="-29" x="-51.5" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-41.5,-19)"><foreignObject height="38" width="83"><div style="display: inline-block; white-space: nowrap;">No class .. using default</div></foreignObject></g></g></g><g transform="translate(267.5,114.5)" id="cyr2" style="opacity: 1;" class="node node-cyr-undefined"><circle r="94.5" y="-29" x="-94.5"></circle><g transform="translate(0,0)" class="label"><g transform="translate(-84.5,-19)"><foreignObject height="38" width="169"><div style="display: inline-block; white-space: nowrap;">Class node-cyr-undefined .. is undefined, using default</div></foreignObject></g></g></g><g transform="translate(169.5,278.5)" id="ndef" style="opacity: 1;" class="node"><rect height="39" width="102" y="-19.5" x="-51" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-41,-9.5)"><foreignObject height="19" width="82"><div style="display: inline-block; white-space: nowrap;">Default style</div></foreignObject></g></g></g><g transform="translate(487,114.5)" id="sq" style="opacity: 1;" class="node node-square"><rect height="58" width="150" y="-29" x="-75" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-65,-19)"><foreignObject height="38" width="130"><div style="display: inline-block; white-space: nowrap;">Class node-square .. defined in page CSS</div></foreignObject></g></g></g><g transform="translate(487,278.5)" id="ncss" style="opacity: 1;" class="node"><rect height="39" width="118" y="-19.5" x="-59" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-49,-9.5)"><foreignObject height="19" width="98"><div style="display: inline-block; white-space: nowrap;">Page CSS style</div></foreignObject></g></g></g><g transform="translate(952,114.5)" id="cyr" style="opacity: 1;" class="node node-cyr"><rect height="58" width="146" y="-29" x="-73" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-63,-19)"><foreignObject height="38" width="126"><div style="display: inline-block; white-space: nowrap;">Class node-cyr .. defined by classDef</div></foreignObject></g></g></g><g transform="translate(720.5,114.5)" id="od2" style="opacity: 1;" class="node node-odd-override"><polygon transform="translate(-89,39)" points="-39,0 178,0 178,-78 -39,-78 0,-39"></polygon><g transform="translate(0,0)" class="label"><g transform="translate(-79,-29)"><foreignObject height="58" width="158"><div style="display: inline-block; white-space: nowrap;">Class node-odd-override .. defined in page CSS .. and defined by classDef</div></foreignObject></g></g></g><g transform="translate(836.25,278.5)" id="ncdef" style="opacity: 1;" class="node"><rect height="39" width="109" y="-19.5" x="-54.5" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-44.5,-9.5)"><foreignObject height="19" width="89"><div style="display: inline-block; white-space: nowrap;">classDef style</div></foreignObject></g></g></g><g transform="translate(1320,114.5)" id="e1" style="opacity: 1;" class="node node-e1"><rect style="fill:#FF0000;" height="78" width="146" y="-39" x="-73" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-63,-29)"><foreignObject height="58" width="126"><div style="display: inline-block; white-space: nowrap;">Class node-cyr .. defined by classDef .. and inline style</div></foreignObject></g></g></g><g transform="translate(1556.25,114.5)" id="e2" style="opacity: 1;" class="node node-e2"><polygon style="fill:#FF0000;" transform="translate(-89,48.5)" points="-48.5,0 178,0 178,-97 -48.5,-97 0,-48.5"></polygon><g transform="translate(0,0)" class="label"><g transform="translate(-79,-38.5)"><foreignObject height="77" width="158"><div style="display: inline-block; white-space: nowrap;">Class node-odd-override .. defined in page CSS .. and defined by classDef .. and inline style</div></foreignObject></g></g></g><g transform="translate(1136,114.5)" id="e" style="opacity: 1;" class="node"><circle style="fill:#FF0000;" r="61" y="-29" x="-61"></circle><g transform="translate(0,0)" class="label"><g transform="translate(-51,-19)"><foreignObject height="38" width="102"><div style="display: inline-block; white-space: nowrap;">Inline style in .. graph definition</div></foreignObject></g></g></g><g transform="translate(1320,278.5)" id="ninl" style="opacity: 1;" class="node"><rect height="39" width="91" y="-19.5" x="-45.5" ry="0" rx="0"></rect><g transform="translate(0,0)" class="label"><g transform="translate(-35.5,-9.5)"><foreignObject height="19" width="71"><div style="display: inline-block; white-space: nowrap;">Inline style</div></foreignObject></g></g></g></g></g></g></svg>
Reference in New Issue View Git Blame Copy Permalink