WireViz/examples/demo01.html
2024-06-16 22:17:54 +02:00

262 lines
15 KiB
HTML
Generated
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="generator" content="WireViz 0.5-dev - https://github.com/formatc1702/WireViz">
<title>demo01</title>
<style>
#bom table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#bom th, td {
padding: 4px;
text-align: left;
}
.bom_col_qty {
text-align: right;
}
</style>
</head><body style="font-family:arial;background-color:#ffffff">
<h1>demo01</h1>
<h2>Diagram</h2>
<div id="description">
<!-- %description% -->
</div>
<div id="diagram">
<!-- XML and DOCTYPE declarations from SVG file removed -->
<!-- Generated by graphviz version 11.0.0 (20240428.1522)
-->
<!-- Pages: 1 -->
<svg width="835pt" height="305pt"
viewBox="0.00 0.00 834.75 305.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 301)">
<polygon fill="#ffffff" stroke="none" points="-4,4 -4,-301 830.75,-301 830.75,4 -4,4"/>
<!-- X1 -->
<g id="node1" class="node">
<title>X1</title>
<polygon fill="#ffffff" stroke="black" points="139.5,-265 0,-265 0,0 139.5,0 139.5,-265"/>
<polygon fill="none" stroke="black" points="0,-240.5 0,-265 139.5,-265 139.5,-240.5 0,-240.5"/>
<text text-anchor="start" x="60.75" y="-247.7" font-family="arial" font-size="14.00">X1</text>
<polygon fill="none" stroke="black" points="0,-216 0,-240.5 48.5,-240.5 48.5,-216 0,-216"/>
<text text-anchor="start" x="4" y="-223.2" font-family="arial" font-size="14.00">D&#45;Sub</text>
<polygon fill="none" stroke="black" points="48.5,-216 48.5,-240.5 100,-240.5 100,-216 48.5,-216"/>
<text text-anchor="start" x="52.5" y="-223.2" font-family="arial" font-size="14.00">female</text>
<polygon fill="none" stroke="black" points="100,-216 100,-240.5 139.5,-240.5 139.5,-216 100,-216"/>
<text text-anchor="start" x="104" y="-223.2" font-family="arial" font-size="14.00">9&#45;pin</text>
<polygon fill="none" stroke="black" points="0,-192 0,-216 81.25,-216 81.25,-192 0,-192"/>
<text text-anchor="start" x="24.88" y="-198.7" font-family="arial" font-size="14.00">DCD</text>
<polygon fill="none" stroke="black" points="81.25,-192 81.25,-216 139.5,-216 139.5,-192 81.25,-192"/>
<text text-anchor="start" x="106.25" y="-198.7" font-family="arial" font-size="14.00">1</text>
<polygon fill="none" stroke="black" points="0,-168 0,-192 81.25,-192 81.25,-168 0,-168"/>
<text text-anchor="start" x="30.5" y="-174.7" font-family="arial" font-size="14.00">RX</text>
<polygon fill="none" stroke="black" points="81.25,-168 81.25,-192 139.5,-192 139.5,-168 81.25,-168"/>
<text text-anchor="start" x="106.25" y="-174.7" font-family="arial" font-size="14.00">2</text>
<polygon fill="none" stroke="black" points="0,-144 0,-168 81.25,-168 81.25,-144 0,-144"/>
<text text-anchor="start" x="31.25" y="-150.7" font-family="arial" font-size="14.00">TX</text>
<polygon fill="none" stroke="black" points="81.25,-144 81.25,-168 139.5,-168 139.5,-144 81.25,-144"/>
<text text-anchor="start" x="106.25" y="-150.7" font-family="arial" font-size="14.00">3</text>
<polygon fill="none" stroke="black" points="0,-120 0,-144 81.25,-144 81.25,-120 0,-120"/>
<text text-anchor="start" x="25.62" y="-126.7" font-family="arial" font-size="14.00">DTR</text>
<polygon fill="none" stroke="black" points="81.25,-120 81.25,-144 139.5,-144 139.5,-120 81.25,-120"/>
<text text-anchor="start" x="106.25" y="-126.7" font-family="arial" font-size="14.00">4</text>
<polygon fill="none" stroke="black" points="0,-96 0,-120 81.25,-120 81.25,-96 0,-96"/>
<text text-anchor="start" x="24.88" y="-102.7" font-family="arial" font-size="14.00">GND</text>
<polygon fill="none" stroke="black" points="81.25,-96 81.25,-120 139.5,-120 139.5,-96 81.25,-96"/>
<text text-anchor="start" x="106.25" y="-102.7" font-family="arial" font-size="14.00">5</text>
<polygon fill="none" stroke="black" points="0,-72 0,-96 81.25,-96 81.25,-72 0,-72"/>
<text text-anchor="start" x="25.25" y="-78.7" font-family="arial" font-size="14.00">DSR</text>
<polygon fill="none" stroke="black" points="81.25,-72 81.25,-96 139.5,-96 139.5,-72 81.25,-72"/>
<text text-anchor="start" x="106.25" y="-78.7" font-family="arial" font-size="14.00">6</text>
<polygon fill="none" stroke="black" points="0,-48 0,-72 81.25,-72 81.25,-48 0,-48"/>
<text text-anchor="start" x="26" y="-54.7" font-family="arial" font-size="14.00">RTS</text>
<polygon fill="none" stroke="black" points="81.25,-48 81.25,-72 139.5,-72 139.5,-48 81.25,-48"/>
<text text-anchor="start" x="106.25" y="-54.7" font-family="arial" font-size="14.00">7</text>
<polygon fill="none" stroke="black" points="0,-24 0,-48 81.25,-48 81.25,-24 0,-24"/>
<text text-anchor="start" x="26" y="-30.7" font-family="arial" font-size="14.00">CTS</text>
<polygon fill="none" stroke="black" points="81.25,-24 81.25,-48 139.5,-48 139.5,-24 81.25,-24"/>
<text text-anchor="start" x="106.25" y="-30.7" font-family="arial" font-size="14.00">8</text>
<polygon fill="none" stroke="black" points="0,0 0,-24 81.25,-24 81.25,0 0,0"/>
<text text-anchor="start" x="33.12" y="-6.7" font-family="arial" font-size="14.00">RI</text>
<polygon fill="none" stroke="black" points="81.25,0 81.25,-24 139.5,-24 139.5,0 81.25,0"/>
<text text-anchor="start" x="106.25" y="-6.7" font-family="arial" font-size="14.00">9</text>
</g>
<!-- W1 -->
<g id="node2" class="node">
<title>W1</title>
<polygon fill="#ffffff" stroke="black" points="494.5,-297 283.5,-297 283.5,-88 494.5,-88 494.5,-297"/>
<polygon fill="none" stroke="black" points="283.5,-272.5 283.5,-297 494.5,-297 494.5,-272.5 283.5,-272.5"/>
<text text-anchor="start" x="377.75" y="-279.7" font-family="arial" font-size="14.00">W1</text>
<polygon fill="none" stroke="black" points="283.5,-248 283.5,-272.5 317.88,-272.5 317.88,-248 283.5,-248"/>
<text text-anchor="start" x="293.19" y="-255.2" font-family="arial" font-size="14.00">3x</text>
<polygon fill="none" stroke="black" points="317.88,-248 317.88,-272.5 398,-272.5 398,-248 317.88,-248"/>
<text text-anchor="start" x="327.56" y="-255.2" font-family="arial" font-size="14.00">0.25 mm²</text>
<polygon fill="none" stroke="black" points="398,-248 398,-272.5 439.12,-272.5 439.12,-248 398,-248"/>
<text text-anchor="start" x="407.69" y="-255.2" font-family="arial" font-size="14.00">+ S</text>
<polygon fill="none" stroke="black" points="439.12,-248 439.12,-272.5 494.5,-272.5 494.5,-248 439.12,-248"/>
<text text-anchor="start" x="448.81" y="-255.2" font-family="arial" font-size="14.00">0.2 m</text>
<text text-anchor="start" x="316.12" y="-232.7" font-family="arial" font-size="14.00"> </text>
<text text-anchor="start" x="285.38" y="-212.7" font-family="arial" font-size="14.00">X1:5:GND</text>
<text text-anchor="start" x="354.12" y="-212.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;1:WH &#160;&#160;&#160;</text>
<text text-anchor="start" x="427.38" y="-212.7" font-family="arial" font-size="14.00">X2:1:GND</text>
<text text-anchor="start" x="291" y="-186.7" font-family="arial" font-size="14.00">X1:2:RX</text>
<text text-anchor="start" x="356.38" y="-186.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;2:BN &#160;&#160;&#160;</text>
<text text-anchor="start" x="433.75" y="-186.7" font-family="arial" font-size="14.00">X2:3:TX</text>
<text text-anchor="start" x="291.75" y="-160.7" font-family="arial" font-size="14.00">X1:3:TX</text>
<text text-anchor="start" x="355.62" y="-160.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;3:GN &#160;&#160;&#160;</text>
<text text-anchor="start" x="433" y="-160.7" font-family="arial" font-size="14.00">X2:2:RX</text>
<text text-anchor="start" x="316.12" y="-134.7" font-family="arial" font-size="14.00"> </text>
<text text-anchor="start" x="285.38" y="-114.7" font-family="arial" font-size="14.00">X1:5:GND</text>
<text text-anchor="start" x="369.12" y="-114.7" font-family="arial" font-size="14.00">Shield</text>
<text text-anchor="start" x="316.12" y="-92.7" font-family="arial" font-size="14.00"> </text>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge1" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-106C218.66,-108.21 208.32,-205.21 283.5,-203"/>
<path fill="none" stroke="#ffffff" stroke-width="2" d="M139.5,-108C216.67,-108 206.33,-205 283.5,-205"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-110C214.68,-107.79 204.34,-204.79 283.5,-207"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge2" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-178C203.38,-178.01 219.38,-177.01 283.5,-177"/>
<path fill="none" stroke="#895956" stroke-width="2" d="M139.5,-180C203.5,-180 219.5,-179 283.5,-179"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-182C203.62,-182 219.62,-181 283.5,-181"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge3" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-154C203.14,-154.04 219.12,-151.04 283.5,-151"/>
<path fill="none" stroke="#00ff00" stroke-width="2" d="M139.5,-156C203.51,-156 219.49,-153 283.5,-153"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-158C203.88,-157.97 219.86,-154.97 283.5,-155"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge4" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M139.5,-108C203.5,-108 219.5,-109 283.5,-109"/>
</g>
<!-- W1&#45;&#45;W1 -->
<g id="edge5" class="edge">
<title>W1:w&#45;&#45;W1:e</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-203C353.83,-203 424.17,-203 494.5,-203"/>
<path fill="none" stroke="#ffffff" stroke-width="2" d="M283.5,-205C353.83,-205 424.17,-205 494.5,-205"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-207C353.83,-207 424.17,-207 494.5,-207"/>
</g>
<!-- W1&#45;&#45;W1 -->
<g id="edge6" class="edge">
<title>W1:w&#45;&#45;W1:e</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-177C353.83,-177 424.17,-177 494.5,-177"/>
<path fill="none" stroke="#895956" stroke-width="2" d="M283.5,-179C353.83,-179 424.17,-179 494.5,-179"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-181C353.83,-181 424.17,-181 494.5,-181"/>
</g>
<!-- W1&#45;&#45;W1 -->
<g id="edge7" class="edge">
<title>W1:w&#45;&#45;W1:e</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-151C353.83,-151 424.17,-151 494.5,-151"/>
<path fill="none" stroke="#00ff00" stroke-width="2" d="M283.5,-153C353.83,-153 424.17,-153 494.5,-153"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-155C353.83,-155 424.17,-155 494.5,-155"/>
</g>
<!-- W1&#45;&#45;W1 -->
<g id="edge8" class="edge">
<title>W1:w&#45;&#45;W1:e</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M283.5,-109C353.83,-109 424.17,-109 494.5,-109"/>
</g>
<!-- X2 -->
<g id="node3" class="node">
<title>X2</title>
<polygon fill="#ffffff" stroke="black" points="826.75,-266 638.49,-266 638.49,-145 826.75,-145 826.75,-266"/>
<polygon fill="none" stroke="black" points="638.5,-241.5 638.5,-266 826.75,-266 826.75,-241.5 638.5,-241.5"/>
<text text-anchor="start" x="723.62" y="-248.7" font-family="arial" font-size="14.00">X2</text>
<polygon fill="none" stroke="black" points="638.5,-217 638.5,-241.5 735.75,-241.5 735.75,-217 638.5,-217"/>
<text text-anchor="start" x="642.5" y="-224.2" font-family="arial" font-size="14.00">Molex KK 254</text>
<polygon fill="none" stroke="black" points="735.75,-217 735.75,-241.5 787.25,-241.5 787.25,-217 735.75,-217"/>
<text text-anchor="start" x="739.75" y="-224.2" font-family="arial" font-size="14.00">female</text>
<polygon fill="none" stroke="black" points="787.25,-217 787.25,-241.5 826.75,-241.5 826.75,-217 787.25,-217"/>
<text text-anchor="start" x="791.25" y="-224.2" font-family="arial" font-size="14.00">3&#45;pin</text>
<polygon fill="none" stroke="black" points="638.5,-193 638.5,-217 721.12,-217 721.12,-193 638.5,-193"/>
<text text-anchor="start" x="675.68" y="-199.7" font-family="arial" font-size="14.00">1</text>
<polygon fill="none" stroke="black" points="721.12,-193 721.12,-217 826.75,-217 826.75,-193 721.12,-193"/>
<text text-anchor="start" x="758.18" y="-199.7" font-family="arial" font-size="14.00">GND</text>
<polygon fill="none" stroke="black" points="638.5,-169 638.5,-193 721.12,-193 721.12,-169 638.5,-169"/>
<text text-anchor="start" x="675.68" y="-175.7" font-family="arial" font-size="14.00">2</text>
<polygon fill="none" stroke="black" points="721.12,-169 721.12,-193 826.75,-193 826.75,-169 721.12,-169"/>
<text text-anchor="start" x="763.81" y="-175.7" font-family="arial" font-size="14.00">RX</text>
<polygon fill="none" stroke="black" points="638.5,-145 638.5,-169 721.12,-169 721.12,-145 638.5,-145"/>
<text text-anchor="start" x="675.68" y="-151.7" font-family="arial" font-size="14.00">3</text>
<polygon fill="none" stroke="black" points="721.12,-145 721.12,-169 826.75,-169 826.75,-145 721.12,-145"/>
<text text-anchor="start" x="764.56" y="-151.7" font-family="arial" font-size="14.00">TX</text>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge9" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-203C558.5,-203 574.5,-203 638.5,-203"/>
<path fill="none" stroke="#ffffff" stroke-width="2" d="M494.5,-205C558.5,-205 574.5,-205 638.5,-205"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-207C558.5,-207 574.5,-207 638.5,-207"/>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge10" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-177C557.57,-177.9 572.09,-155.9 638.5,-155"/>
<path fill="none" stroke="#895956" stroke-width="2" d="M494.5,-179C559.24,-179 573.76,-157 638.5,-157"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-181C560.91,-180.1 575.43,-158.1 638.5,-159"/>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge11" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-151C561.5,-152.13 575.1,-180.13 638.5,-179"/>
<path fill="none" stroke="#00ff00" stroke-width="2" d="M494.5,-153C559.7,-153 573.3,-181 638.5,-181"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M494.5,-155C557.9,-153.88 571.5,-181.88 638.5,-183"/>
</g>
</g>
</svg>
</div>
<div id="notes">
<!-- %notes% -->
</div>
<h2>Bill of Materials</h2>
<div id="bom">
<table class="bom">
<tr>
<th class="bom_col_id">Id</th>
<th class="bom_col_description">Description</th>
<th class="bom_col_qty">Qty</th>
<th class="bom_col_unit">Unit</th>
<th class="bom_col_designators">Designators</th>
</tr>
<tr>
<td class="bom_col_id">1</td>
<td class="bom_col_description">Cable, 3 x 0.25 mm² shielded</td>
<td class="bom_col_qty">0.2</td>
<td class="bom_col_unit">m</td>
<td class="bom_col_designators">W1</td>
</tr>
<tr>
<td class="bom_col_id">2</td>
<td class="bom_col_description">Connector, D-Sub, female, 9 pins</td>
<td class="bom_col_qty">1</td>
<td class="bom_col_unit"></td>
<td class="bom_col_designators">X1</td>
</tr>
<tr>
<td class="bom_col_id">3</td>
<td class="bom_col_description">Connector, Molex KK 254, female, 3 pins</td>
<td class="bom_col_qty">1</td>
<td class="bom_col_unit"></td>
<td class="bom_col_designators">X2</td>
</tr>
</table>
</div>
</body></html>