more realistic organigram

This commit is contained in:
STEINNI
2026-01-13 18:05:36 +00:00
parent 5b01f924fe
commit d0c3155192
2 changed files with 19 additions and 12 deletions
+7 -6
View File
@@ -113,6 +113,7 @@
left: 0; left: 0;
width: 99%; width: 99%;
background: black; background: black;
clip-path: polygon( 0% 100%, 100% 100%, 100% 50%, 0% 50%);
} }
.bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; } .bzgf-node[data-nodetype="database"] [data-direction="n"]{ top: -17px; }
.bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; } .bzgf-node[data-nodetype="database"] [data-direction="s"]{ bottom: -17px; }
@@ -175,14 +176,14 @@
<template> <template>
<div class="bzgf-node" data-nodetype="start"> <div class="bzgf-node" data-nodetype="start">
<div class="text"></div> <div class="text">{text}</div>
<div class="port" data-id="out1" data-direction="s"></div> <div class="port" data-id="out1" data-direction="s"></div>
</div> </div>
</template> </template>
<template> <template>
<div class="bzgf-node" data-nodetype="end"> <div class="bzgf-node" data-nodetype="end">
<div class="text"></div> <div class="text">{text}</div>
<div class="port" data-id="inp1" data-direction="n"></div> <div class="port" data-id="inp1" data-direction="n"></div>
</div> </div>
</template> </template>
@@ -190,7 +191,7 @@
<template> <template>
<div class="bzgf-node" data-nodetype="condition"> <div class="bzgf-node" data-nodetype="condition">
<div class="frame"></div> <div class="frame"></div>
<div class="text"></div> <div class="text">{text}</div>
<div class="port" data-id="inp1" data-direction="n"></div> <div class="port" data-id="inp1" data-direction="n"></div>
<div class="port" data-id="out1" data-direction="w"></div> <div class="port" data-id="out1" data-direction="w"></div>
<div class="port" data-id="out2" data-direction="s"></div> <div class="port" data-id="out2" data-direction="s"></div>
@@ -201,7 +202,7 @@
<template> <template>
<div class="bzgf-node" data-nodetype="process"> <div class="bzgf-node" data-nodetype="process">
<div class="dbline"></div> <div class="dbline"></div>
<div class="text"></div> <div class="text">{text}</div>
<div class="port" data-id="inout1" data-direction="n"></div> <div class="port" data-id="inout1" data-direction="n"></div>
<div class="port" data-id="inout2" data-direction="s"></div> <div class="port" data-id="inout2" data-direction="s"></div>
<div class="port" data-id="inout3" data-direction="w"></div> <div class="port" data-id="inout3" data-direction="w"></div>
@@ -213,7 +214,7 @@
<div class="bzgf-node" data-nodetype="database"> <div class="bzgf-node" data-nodetype="database">
<div class="top"></div> <div class="top"></div>
<div class="bottom"></div> <div class="bottom"></div>
<div class="text"></div> <div class="text">{text}</div>
<div class="port" data-id="inout1" data-direction="n"></div> <div class="port" data-id="inout1" data-direction="n"></div>
<div class="port" data-id="inout2" data-direction="s"></div> <div class="port" data-id="inout2" data-direction="s"></div>
<div class="port" data-id="inout3" data-direction="w"></div> <div class="port" data-id="inout3" data-direction="w"></div>
@@ -225,7 +226,7 @@
<div class="bzgf-node" data-nodetype="preparation"> <div class="bzgf-node" data-nodetype="preparation">
<div class="outerframe"> <div class="outerframe">
<div class="innerframe"> <div class="innerframe">
<div class="text"></div> <div class="text">{text}</div>
</div> </div>
</div> </div>
<div class="port" data-id="inp1" data-direction="n"></div> <div class="port" data-id="inp1" data-direction="n"></div>
+12 -6
View File
@@ -4,27 +4,33 @@
"nodes":[ "nodes":[
{ "nodeType": "start", { "nodeType": "start",
"id": "aze", "id": "aze",
"coords": { "x": 220, "y": 20} "coords": { "x": 220, "y": 20},
"markup": { "text": "Start" }
}, },
{ "nodeType": "process", { "nodeType": "process",
"id": "aze2", "id": "aze2",
"coords": { "x": 220, "y": 120} "coords": { "x": 220, "y": 120},
"markup": { "text": "x = alph - 1" }
}, },
{ "nodeType": "condition", { "nodeType": "condition",
"id": "qsd", "id": "qsd",
"coords": { "x": 250, "y": 270} "coords": { "x": 250, "y": 270},
"markup": { "text": "x > 0" }
}, },
{ "nodeType": "preparation", { "nodeType": "preparation",
"id": "qsd2", "id": "qsd2",
"coords": { "x": 250, "y": 470} "coords": { "x": 250, "y": 470},
"markup": { "text": "prepare SQL" }
}, },
{ "nodeType": "database", { "nodeType": "database",
"id": "wcx", "id": "wcx",
"coords": { "x": 500, "y": 450} "coords": { "x": 500, "y": 450},
"markup": { "text": "MySQL<br>Store" }
}, },
{ "nodeType": "end", { "nodeType": "end",
"id": "ert", "id": "ert",
"coords": { "x": 250, "y": 650} "coords": { "x": 250, "y": 650},
"markup": { "text": "End" }
} }
], ],
"links": [ "links": [