Gozintograph: Unterschied zwischen den Versionen

Aus FLBK-Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Markierung: Zurückgesetzt
Markierung: Manuelle Zurücksetzung
Zeile 23: Zeile 23:
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt.   
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.
<!-- Variante A: JSXGraph -->
<!-- Variante B: Reines SVG + JS (kein JSXGraph) -->
<html>
<html>
<div id="gozinto_jsx" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
<style>
  .gozinto-wrap { width:95vw; max-width:1000px; height:70vw; max-height:600px; border:0px solid #ccc; }
  svg { width:100%; height:100%; touch-action:none; user-select:none; }
  .node-rect { fill:#3498db; stroke:#1f4e78; stroke-width:2; cursor:grab; }
  .node-text { font-family: sans-serif; font-size:13px; fill:#000; pointer-events:none; }
  .edge-line { stroke:#000; stroke-width:2; fill:none; }
  .edge-arrow { fill:#000; }
  .count-circle { fill:#fff; stroke:#000; stroke-width:1.5; }
  .count-text { font-family:sans-serif; font-size:12px; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
</style>
 
<div class="gozinto-wrap">
<svg id="gozinto_svg" viewBox="0 0 1400 700" preserveAspectRatio="xMidYMid meet">
  <!-- edges will be inserted dynamically -->
</svg>
</div>


<script src="https://jsxgraph.org/distrib/jsxgraphcore.js"></script>
<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
(function(){
     var brd = JXG.JSXGraph.initBoard('gozinto_jsx', {
  const svg = document.getElementById('gozinto_svg');
        boundingbox: [-1, 10, 15, -1],
 
        axis: false,
  // Layout scale (convert logical coords to svg px)
        showNavigation: false
  const scale = 100; // 1 unit = 100px
  const yOffset = 50;
 
  // Utility: create SVG element
  function svgEl(name, attrs){
     const el = document.createElementNS('http://www.w3.org/2000/svg', name);
    for(const k in (attrs||{})) el.setAttribute(k, attrs[k]);
    return el;
  }
 
  // Node factory: creates a rect group with fixed size but movable
  function createNode(id, cx, cy, w, h, label){
    const g = svgEl('g', {class:'node', 'data-id':id});
    const rect = svgEl('rect', {
      class:'node-rect',
      x: (cx - w/2)*scale, y: (cy - h/2)*scale + yOffset,
      width: w*scale, height: h*scale,
      rx:6, ry:6
     });
     });
    const text = svgEl('text', {class:'node-text', x: cx*scale, y: cy*scale + yOffset, 'text-anchor':'middle', 'dominant-baseline':'middle'});
    text.textContent = label;
    g.appendChild(rect);
    g.appendChild(text);
    svg.appendChild(g);


     // ----- Erzeuge Rechteck als Polygon mit fixierter Größe, aber draggable als Ganzes -----
     // state
     function createRect(x,y,w,h,labelText) {
     const node = {
        var p1 = brd.create('point', [x, y], {visible:false, fixed:true});
      id, cx, cy, w, h, g, rect, text
        var p2 = brd.create('point', [x+w, y], {visible:false, fixed:true});
    };
        var p3 = brd.create('point', [x+w, y-h], {visible:false, fixed:true});
        var p4 = brd.create('point', [x, y-h], {visible:false, fixed:true});


        var poly = brd.create('polygon', [p1,p2,p3,p4], {
    // dragging
            fillColor:'#3498db', fillOpacity:0.85,
    let dragging = false;
            borders:{strokeWidth:2, strokeColor:'#1f4e78'},
    let start = null;
            vertices:{visible:false}
        });


        // Damit das Rechteck als Ganzes verschiebbar ist:
    rect.addEventListener('pointerdown', function(e){
        poly.draggable = true;
      rect.setPointerCapture(e.pointerId);
      dragging = true;
      start = {x:e.clientX, y:e.clientY, cx:node.cx, cy:node.cy};
    });
    rect.addEventListener('pointermove', function(e){
      if(!dragging) return;
      const dx = (e.clientX - start.x)/scale;
      const dy = (e.clientY - start.y)/scale;
      node.cx = start.cx + dx;
      node.cy = start.cy + dy;
      updateNode(node);
      updateAllEdges();
    });
    rect.addEventListener('pointerup', function(e){
      dragging = false;
      rect.releasePointerCapture(e.pointerId);
    });
    rect.addEventListener('pointercancel', function(e){ dragging=false; });


        // Zentrumspunkt als echter JSXGraph-Punkt (unsichtbar), damit wir ihn als Parent für Linien nutzen können
    return node;
        var center = brd.create('point', [
  }
            function(){ return (p1.X()+p3.X())/2; },
            function(){ return (p1.Y()+p3.Y())/2; }
        ], {visible:false, fixed:true});


        brd.create('text', [
  function updateNode(node){
            function(){ return center.X(); },
    node.rect.setAttribute('x', (node.cx - node.w/2)*scale);
            function(){ return center.Y(); },
    node.rect.setAttribute('y', (node.cy - node.h/2)*scale + yOffset);
            labelText
    node.text.setAttribute('x', node.cx*scale);
        ], {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14});
    node.text.setAttribute('y', node.cy*scale + yOffset);
  }


        return {p1:p1,p2:p2,p3:p3,p4:p4, poly:poly, center:center,
  // compute intersection of ray center->target with rectangle border (axis-aligned)
                xMin: function(){ return Math.min(p1.X(), p2.X(), p3.X(), p4.X()); },
  function intersectRectBorder(node, targetX, targetY){
                xMax: function(){ return Math.max(p1.X(), p2.X(), p3.X(), p4.X()); },
    const cx = node.cx, cy = node.cy;
                yMin: function(){ return Math.min(p1.Y(), p2.Y(), p3.Y(), p4.Y()); },
    const dx = targetX - cx, dy = targetY - cy;
                yMax: function(){ return Math.max(p1.Y(), p2.Y(), p3.Y(), p4.Y()); }
    const xMin = node.cx - node.w/2, xMax = node.cx + node.w/2;
              };
    const yMin = node.cy - node.h/2, yMax = node.cy + node.h/2;
    let tCandidates = [];
    if(Math.abs(dx) > 1e-9){
      let t1 = (xMin - cx)/dx;
      let y1 = cy + t1*dy;
      if(t1>0 && y1>=yMin-1e-9 && y1<=yMax+1e-9) tCandidates.push({t:t1,x:xMin,y:y1});
      let t2 = (xMax - cx)/dx;
      let y2 = cy + t2*dy;
      if(t2>0 && y2>=yMin-1e-9 && y2<=yMax+1e-9) tCandidates.push({t:t2,x:xMax,y:y2});
     }
     }
    if(Math.abs(dy) > 1e-9){
      let t3 = (yMin - cy)/dy;
      let x3 = cx + t3*dx;
      if(t3>0 && x3>=xMin-1e-9 && x3<=xMax+1e-9) tCandidates.push({t:t3,x:x3,y:yMin});
      let t4 = (yMax - cy)/dy;
      let x4 = cx + t4*dx;
      if(t4>0 && x4>=xMin-1e-9 && x4<=xMax+1e-9) tCandidates.push({t:t4,x:x4,y:yMax});
    }
    if(tCandidates.length===0) return {x:cx,y:cy};
    tCandidates.sort((a,b)=>a.t-b.t);
    return {x:tCandidates[0].x, y:tCandidates[0].y};
  }
  // circle boundary point toward target
  function pointOnCircle(cx, cy, R, tx, ty){
    const dx = tx - cx, dy = ty - cy;
    const d = Math.sqrt(dx*dx + dy*dy);
    if(d < 1e-9) return {x:cx, y:cy};
    return {x: cx + R*dx/d, y: cy + R*dy/d};
  }
  // arrowhead path (triangle) at (x,y) pointing to direction (ux,uy)
  function makeArrowHead(x, y, ux, uy, size){
    // perpendicular
    const px = -uy, py = ux;
    const p1x = x, p1y = y;
    const p2x = x - ux*size + px*size*0.5;
    const p2y = y - uy*size + py*size*0.5;
    const p3x = x - ux*size - px*size*0.5;
    const p3y = y - uy*size - py*size*0.5;
    return `M ${p1x} ${p1y} L ${p2x} ${p2y} L ${p3x} ${p3y} Z`;
  }


    // ----- Kreis-Knoten (Punkt + Kreis + Label) -----
  // Edge structure: {fromNode, toNode, amount, circle, lineA, lineB, arrow}
    function createCircleNode(cx, cy, labelText) {
  const edges = [];
        var p = brd.create('point', [cx, cy], {visible:false});
        var R = 0.35;
        brd.create('circle', [p, R], {strokeColor:'black', fillColor:'white', fillOpacity:1});
        brd.create('text', [function(){return p.X();}, function(){return p.Y();}, labelText],
            {anchorX:'middle', anchorY:'middle', fontSize:12, strokeColor:'black'});
        p.radius = R;
        return p;
    }


     // ----- Schnittpunkt eines Strahls (center -> target) mit dem Rechteckrand (analytisch) -----
  function makeConnection(fromNode, toNode, amount, yMid, xOffset){
     // rect: Objekt mit xMin/xMax/yMin/yMax Funktionen
     const group = svgEl('g', {});
     // target: JSXGraph-Point (oder Objekt mit X()/Y())
    const circle = svgEl('circle', {class:'count-circle'});
     function edgePointRect(rect, targetPoint) {
     const text = svgEl('text', {class:'count-text'});
        // center coords (functions)
     const lineA = svgEl('path', {class:'edge-line', fill:'none'}); // from rect -> circle (path to allow potential future styling)
        var cx = function(){ return rect.center.X(); };
    const lineB = svgEl('path', {class:'edge-line', fill:'none'});
        var cy = function(){ return rect.center.Y(); };
     const arrow = svgEl('path', {class:'edge-arrow'});
    group.appendChild(lineA);
    group.appendChild(lineB);
    group.appendChild(circle);
    group.appendChild(text);
    group.appendChild(arrow);
    svg.appendChild(group);


        // create derived point: intersection computed analytically
    const e = {fromNode, toNode, amount, circle, text, lineA, lineB, arrow, yMid, xOffset};
        var pt = brd.create('point', [
    edges.push(e);
            function(){
    updateEdge(e);
                var Cx = rect.center.X();
  }
                var Cy = rect.center.Y();
                var Tx = targetPoint.X();
                var Ty = targetPoint.Y();
                var dx = Tx - Cx;
                var dy = Ty - Cy;
                // if direction is zero, return center
                if(Math.abs(dx) < 1e-9 && Math.abs(dy) < 1e-9) return Cx;
                var tCandidates = [];


                // check vertical sides x = xMin and xMax
  function updateEdge(e){
                if(Math.abs(dx) > 1e-9) {
    // circle center is midpoint between centers with offset
                    var t1 = (rect.xMin() - Cx) / dx;
    const cx = (e.fromNode.cx + e.toNode.cx)/2 + (e.xOffset||0);
                    var y1 = Cy + t1 * dy;
    const cy = e.yMid;
                    if(t1>0 && y1 <= rect.yMax() + 1e-9 && y1 >= rect.yMin() - 1e-9) tCandidates.push(t1);
    const R = 0.35;
    // compute in logical coords
    const pFrom = intersectRectBorder(e.fromNode, cx, cy);
    const pTo  = intersectRectBorder(e.toNode, cx, cy);
    const cIn = pointOnCircle(cx, cy, R, pFrom.x, pFrom.y);
    const cOut = pointOnCircle(cx, cy, R, pTo.x, pTo.y);


                    var t2 = (rect.xMax() - Cx) / dx;
    // convert to px
                    var y2 = Cy + t2 * dy;
    function px(p){ return [p.x*scale, p.y*scale + yOffset]; }
                    if(t2>0 && y2 <= rect.yMax() + 1e-9 && y2 >= rect.yMin() - 1e-9) tCandidates.push(t2);
    const pf = px(pFrom), pcIn = px(cIn), pcOut = px(cOut), pt = px(pTo);
                }
                // check horizontal sides y = yMin and yMax
                if(Math.abs(dy) > 1e-9) {
                    var t3 = (rect.yMin() - Cy) / dy;
                    var x3 = Cx + t3 * dx;
                    if(t3>0 && x3 <= rect.xMax() + 1e-9 && x3 >= rect.xMin() - 1e-9) tCandidates.push(t3);


                    var t4 = (rect.yMax() - Cy) / dy;
    // line A: from rect edge -> circle edge (no arrow)
                    var x4 = Cx + t4 * dx;
    lineAPath = `M ${pf[0]} ${pf[1]} L ${pcIn[0]} ${pcIn[1]}`;
                    if(t4>0 && x4 <= rect.xMax() + 1e-9 && x4 >= rect.xMin() - 1e-9) tCandidates.push(t4);
    e.lineA.setAttribute('d', lineAPath);
                }
                if(tCandidates.length === 0) return Cx; // fallback
                // choose the smallest positive t (closest intersection along ray)
                var t = tCandidates.reduce(function(a,b){ return (a<b?a:b); });
                return Cx + t * dx;
            },
            function(){
                var Cx = rect.center.X();
                var Cy = rect.center.Y();
                var Tx = targetPoint.X();
                var Ty = targetPoint.Y();
                var dx = Tx - Cx;
                var dy = Ty - Cy;
                if(Math.abs(dx) < 1e-9 && Math.abs(dy) < 1e-9) return Cy;
                var tCandidates = [];
                if(Math.abs(dx) > 1e-9) {
                    var t1 = (rect.xMin() - Cx) / dx;
                    var y1 = Cy + t1 * dy;
                    if(t1>0 && y1 <= rect.yMax() + 1e-9 && y1 >= rect.yMin() - 1e-9) tCandidates.push(t1);
                    var t2 = (rect.xMax() - Cx) / dx;
                    var y2 = Cy + t2 * dy;
                    if(t2>0 && y2 <= rect.yMax() + 1e-9 && y2 >= rect.yMin() - 1e-9) tCandidates.push(t2);
                }
                if(Math.abs(dy) > 1e-9) {
                    var t3 = (rect.yMin() - Cy) / dy;
                    var x3 = Cx + t3 * dx;
                    if(t3>0 && x3 <= rect.xMax() + 1e-9 && x3 >= rect.xMin() - 1e-9) tCandidates.push(t3);
                    var t4 = (rect.yMax() - Cy) / dy;
                    var x4 = Cx + t4 * dx;
                    if(t4>0 && x4 <= rect.xMax() + 1e-9 && x4 >= rect.xMin() - 1e-9) tCandidates.push(t4);
                }
                if(tCandidates.length === 0) return Cy;
                var t = tCandidates.reduce(function(a,b){ return (a<b?a:b); });
                return Cy + t * dy;
            }
        ], {visible:false});
        return pt;
    }


     // ----- Punkt am Kreisrand in Richtung target -----
     // line B: circle edge -> rect edge (arrowhead drawn separately)
    function edgePointCircle(circleCenter, R, targetPoint) {
    e.lineB.setAttribute('d', `M ${pcOut[0]} ${pcOut[1]} L ${pt[0]} ${pt[1]}`);
        return brd.create('point', [
            function(){
                var cx = circleCenter.X(), cy = circleCenter.Y();
                var tx = targetPoint.X(), ty = targetPoint.Y();
                var dx = tx - cx, dy = ty - cy;
                var d = Math.sqrt(dx*dx + dy*dy);
                if(d < 1e-9) return cx;
                return cx + R * dx / d;
            },
            function(){
                var cx = circleCenter.X(), cy = circleCenter.Y();
                var tx = targetPoint.X(), ty = targetPoint.Y();
                var dx = tx - cx, dy = ty - cy;
                var d = Math.sqrt(dx*dx + dy*dy);
                if(d < 1e-9) return cy;
                return cy + R * dy / d;
            }
        ], {visible:false});
    }


     // ----- Verbindungsaufbau: exakte Endpunkte und Kreis in der Mitte -----
     // circle
     function makeConnection(rectFrom, rectTo, amount, yMid, xOffset) {
     e.circle.setAttribute('cx', (cx*scale));
        // create circle center as reactive point (midpoint plus optional x offset)
    e.circle.setAttribute('cy', (cy*scale + yOffset));
        var circleCenter = brd.create('point', [
    e.circle.setAttribute('r', R*scale);
            function(){ return (rectFrom.center.X() + rectTo.center.X())/2 + (xOffset||0); },
    e.circle.setAttribute('class','count-circle');
            function(){ return yMid; }
        ], {visible:false});


        var circle = brd.create('circle', [circleCenter, 0.35], {strokeColor:'black', fillColor:'white'});
    // text
        brd.create('text', [function(){return circleCenter.X();}, function(){return circleCenter.Y();}, amount],
    e.text.setAttribute('x', cx*scale);
            {anchorX:'middle', anchorY:'middle', fontSize:12});
    e.text.setAttribute('y', cy*scale + yOffset);
    e.text.textContent = e.amount;


        // compute edge points
    // arrow head: compute unit vector from cOut -> pTo
        var pFrom = edgePointRect(rectFrom, circleCenter);
    var ux = (pt[0]-pcOut[0]), uy = (pt[1]-pcOut[1]);
        var pTo  = edgePointRect(rectTo, circleCenter);
    var L = Math.sqrt(ux*ux + uy*uy);
    if(L<1e-6) L=1;
    ux/=L; uy/=L;
    const arrowSize = 12;
    const arrowPath = makeArrowHead(pt[0], pt[1], ux, uy, arrowSize);
    e.arrow.setAttribute('d', arrowPath);
    e.arrow.setAttribute('class','edge-arrow');
  }


        var pCircleIn  = edgePointCircle(circleCenter, 0.35, pFrom);
  // create nodes (logical coords)
        var pCircleOut = edgePointCircle(circleCenter, 0.35, pTo);
  const nodes = {};
  nodes.E1 = createNode('E1', 0, 6.8, 1.0, 0.6, 'E1');
  nodes.E2 = createNode('E2', 2.5, 6.8, 1.0, 0.6, 'E2');
  nodes.E3 = createNode('E3', 5, 6.8, 1.0, 0.6, 'E3');
  nodes.E4 = createNode('E4', 7.5, 6.8, 1.0, 0.6, 'E4');


        // line from rect -> circle (no arrowhead)
  nodes.B1 = createNode('B1', 0.75, 3, 1.0, 0.6, 'B1');
        brd.create('line', [pFrom, pCircleIn], {straightFirst:false, straightLast:false, strokeWidth:1.5});
  nodes.B2 = createNode('B2', 2.5, 3, 1.0, 0.6, 'B2');
  nodes.B3 = createNode('B3', 5, 3, 1.0, 0.6, 'B3');
  nodes.B4 = createNode('B4', 7.5, 3, 1.0, 0.6, 'B4');
  nodes.B5 = createNode('B5', 10, 3, 1.0, 0.6, 'B5');


        // arrow from circle -> rect (arrow head at rect side)
  // create edges (with small xOffsets to avoid overlap)
        brd.create('arrow', [pCircleOut, pTo], {strokeWidth:1.8});
  makeConnection(nodes.E1, nodes.B1, '2', 5.6, -0.2);
    }
  makeConnection(nodes.E2, nodes.B1, '1', 5.6,  0.2);


    // ---- Erzeuge Rechtecke ----
  makeConnection(nodes.E1, nodes.B2, '2', 5.6, -0.2);
    var E1 = createRect(0,8,2,1,'E1');
  makeConnection(nodes.E2, nodes.B2, '1', 5.6, 0.2);
    var E2 = createRect(3,8,2,1,'E2');
    var E3 = createRect(6,8,2,1,'E3');
    var E4 = createRect(9,8,2,1,'E4');


    var B1 = createRect(0.5,3,2,1,'B1');
  makeConnection(nodes.E1, nodes.B3, '1', 5.6, -0.3);
    var B2 = createRect(3.5,3,2,1,'B2');
  makeConnection(nodes.E2, nodes.B3, '1', 5.6, 0.0);
    var B3 = createRect(6.5,3,2,1,'B3');
  makeConnection(nodes.E3, nodes.B3, '1', 5.6, 0.3);
    var B4 = createRect(9.5,3,2,1,'B4');
    var B5 = createRect(12.5,3,2,1,'B5');


    // ---- Verbindungen (mit kleinen offsets, damit Pfeilspitzen nicht überlappen) ----
  makeConnection(nodes.E1, nodes.B4, '2', 5.6, -0.3);
    makeConnection(E1, B1, "2", 6, -0.25);
  makeConnection(nodes.E3, nodes.B4, '1', 5.6, 0.0);
    makeConnection(E2, B1, "1", 6,  0.25);
  makeConnection(nodes.E4, nodes.B4, '1', 5.6,  0.3);


    makeConnection(E1, B2, "2", 6, -0.25);
  makeConnection(nodes.E1, nodes.B5, '1', 5.6, -0.2);
    makeConnection(E2, B2, "1", 6,  0.25);
  makeConnection(nodes.E4, nodes.B5, '2', 5.6,  0.2);


    makeConnection(E1, B3, "1", 6, -0.35);
  // update all edges
    makeConnection(E2, B3, "1", 6,  0.0);
  function updateAllEdges(){ edges.forEach(e=>updateEdge(e)); }
    makeConnection(E3, B3, "1", 6,  0.35);


    makeConnection(E1, B4, "2", 6, -0.35);
  // initial update
    makeConnection(E3, B4, "1", 6,  0.0);
  updateAllEdges();
    makeConnection(E4, B4, "1", 6,  0.35);


    makeConnection(E1, B5, "1", 6, -0.25);
  // re-update edges also when window resizes (visual)
    makeConnection(E4, B5, "2", 6,  0.25);
  window.addEventListener('resize', updateAllEdges);
});
})();
</script>
</script>
</html>
</html>

Version vom 14. November 2025, 11:05 Uhr

Ein Gozintograph (von engl. *goes into* = „geht hinein“) ist ein gerichteter Graph, der die Zerlegung eines Endprodukts in seine Einzelteile oder Komponenten beschreibt. Jede Kante stellt dabei eine „Gozinto“-Beziehung dar: Sie zeigt von einer Komponente (Teil) auf das Produkt, in das sie eingeht. Der Gozintograph ist ein zentrales Hilfsmittel in der Produktionsplanung und Stücklistenverwaltung.

Definition

Ein Gozintograph ist ein gerichteter, azyklischer Graph \( G = (V, E) \), wobei:

  • \( V \) die Menge der Knoten darstellt (Produkte oder Teile),
  • \( E \subseteq V \times V \) die gerichteten Kanten darstellt, welche „geht-in“-Beziehungen symbolisieren.

Eine Kante \( (v_i, v_j, a_{ij}) \) mit der Beschriftung \( a_{ij} \) zeigt an, dass zur Herstellung eines Teils \( v_j \) genau \( a_{ij} \) Einheiten von Teil \( v_i \) benötigt werden.

Zusammenhang zu Matrizen

Die Informationen eines Gozintographen lassen sich in einer sogenannten Gozintomatrix darstellen. Diese ist eine Matrix \( A = (a_{ij}) \), bei der das Element \( a_{ij} \) die Anzahl der Einheiten von Komponente \( i \) angibt, die für die Herstellung von Produkt \( j \) benötigt wird. In der Produktionsplanung kann die benötigte Gesamtmenge aller Einzelteile über die Gleichung

\[ \mathbf{x} = (I - A)^{-1} \mathbf{y} \]

bestimmt werden, wobei \( \mathbf{y} \) den Vektor der Endprodukte und \( \mathbf{x} \) den Vektor der benötigten Teilemengen beschreibt.

Beispiele

Produktion eines Produkts aus Einzelteilen

Im folgenden Beispiel werden fünf Bauteile \( B_1, B_2, B_3, B_4, B_5 \) aus vier Einzelteilen \( E_1, E_2, E_3, E_4 \) gefertigt. Die Pfeile zeigen, welche Einzelteile in welches Bauteil eingehen. Die Zahlen an den Pfeilen geben die Stückzahl an.

Beispiel 2: Rezeptstruktur eines Gerichts

Rezeptstruktur eines Gerichts

Im nächsten Beispiel wird der Gozintograph genutzt, um die Zutatenstruktur eines Rezepts zu zeigen. Das Endprodukt „Pizza“ besteht aus mehreren Zwischenprodukten („Teig“, „Soße“) und Basiszutaten. Auch hier zeigen Pfeile mit Zahlen, welche Mengen von Zutaten in die jeweiligen Komponenten eingehen.

Abgerufen von „https://wiki.flbk-hamm.de/index.php?title=Gozintograph&oldid=2308“