Gozintograph: Unterschied zwischen den Versionen

Aus FLBK-Wiki
Zur Navigation springen Zur Suche springen
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Markierung: Zurückgesetzt
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 B: Reines SVG + JS (kein JSXGraph) -->
<!-- Variante A: JSXGraph -->
<html>
<html>
<style>
<div id="gozinto_jsx" style="width:95vw; max-width:1000px; height:70vw; max-height:600px; margin-top:20px;"></div>
  .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>
(function(){
document.addEventListener("DOMContentLoaded", function () {
  const svg = document.getElementById('gozinto_svg');
     var brd = JXG.JSXGraph.initBoard('gozinto_jsx', {
 
        boundingbox: [-1, 10, 15, -1],
  // Layout scale (convert logical coords to svg px)
        axis: false,
  const scale = 100; // 1 unit = 100px
        showNavigation: false
  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);
     // ----- Erzeuge Rechteck als Polygon mit fixierter Größe, aber draggable als Ganzes -----
    g.appendChild(text);
    function createRect(x,y,w,h,labelText) {
    svg.appendChild(g);
        var p1 = brd.create('point', [x, y], {visible:false, fixed:true});
        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});


    // state
        var poly = brd.create('polygon', [p1,p2,p3,p4], {
    const node = {
            fillColor:'#3498db', fillOpacity:0.85,
      id, cx, cy, w, h, g, rect, text
            borders:{strokeWidth:2, strokeColor:'#1f4e78'},
    };
            vertices:{visible:false}
        });


    // dragging
        // Damit das Rechteck als Ganzes verschiebbar ist:
    let dragging = false;
        poly.draggable = true;
    let start = null;


    rect.addEventListener('pointerdown', function(e){
        // Zentrumspunkt als echter JSXGraph-Punkt (unsichtbar), damit wir ihn als Parent für Linien nutzen können
      rect.setPointerCapture(e.pointerId);
        var center = brd.create('point', [
      dragging = true;
            function(){ return (p1.X()+p3.X())/2; },
      start = {x:e.clientX, y:e.clientY, cx:node.cx, cy:node.cy};
            function(){ return (p1.Y()+p3.Y())/2; }
    });
        ], {visible:false, fixed:true});
    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; });


    return node;
        brd.create('text', [
  }
            function(){ return center.X(); },
            function(){ return center.Y(); },
            labelText
        ], {anchorX:'middle', anchorY:'middle', strokeColor:'black', fontSize:14});


  function updateNode(node){
        return {p1:p1,p2:p2,p3:p3,p4:p4, poly:poly, center:center,
    node.rect.setAttribute('x', (node.cx - node.w/2)*scale);
                xMin: function(){ return Math.min(p1.X(), p2.X(), p3.X(), p4.X()); },
    node.rect.setAttribute('y', (node.cy - node.h/2)*scale + yOffset);
                xMax: function(){ return Math.max(p1.X(), p2.X(), p3.X(), p4.X()); },
    node.text.setAttribute('x', node.cx*scale);
                yMin: function(){ return Math.min(p1.Y(), p2.Y(), p3.Y(), p4.Y()); },
    node.text.setAttribute('y', node.cy*scale + yOffset);
                yMax: function(){ return Math.max(p1.Y(), p2.Y(), p3.Y(), p4.Y()); }
  }
              };
    }


  // compute intersection of ray center->target with rectangle border (axis-aligned)
    // ----- Kreis-Knoten (Punkt + Kreis + Label) -----
  function intersectRectBorder(node, targetX, targetY){
    function createCircleNode(cx, cy, labelText) {
    const cx = node.cx, cy = node.cy;
        var p = brd.create('point', [cx, cy], {visible:false});
    const dx = targetX - cx, dy = targetY - cy;
        var R = 0.35;
    const xMin = node.cx - node.w/2, xMax = node.cx + node.w/2;
        brd.create('circle', [p, R], {strokeColor:'black', fillColor:'white', fillOpacity:1});
    const yMin = node.cy - node.h/2, yMax = node.cy + node.h/2;
        brd.create('text', [function(){return p.X();}, function(){return p.Y();}, labelText],
    let tCandidates = [];
            {anchorX:'middle', anchorY:'middle', fontSize:12, strokeColor:'black'});
    if(Math.abs(dx) > 1e-9){
        p.radius = R;
      let t1 = (xMin - cx)/dx;
        return p;
      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
    // ----- Schnittpunkt eines Strahls (center -> target) mit dem Rechteckrand (analytisch) -----
  function pointOnCircle(cx, cy, R, tx, ty){
    // rect: Objekt mit xMin/xMax/yMin/yMax Funktionen
    const dx = tx - cx, dy = ty - cy;
    // target: JSXGraph-Point (oder Objekt mit X()/Y())
    const d = Math.sqrt(dx*dx + dy*dy);
    function edgePointRect(rect, targetPoint) {
    if(d < 1e-9) return {x:cx, y:cy};
        // center coords (functions)
    return {x: cx + R*dx/d, y: cy + R*dy/d};
        var cx = function(){ return rect.center.X(); };
  }
        var cy = function(){ return rect.center.Y(); };


  // arrowhead path (triangle) at (x,y) pointing to direction (ux,uy)
        // create derived point: intersection computed analytically
  function makeArrowHead(x, y, ux, uy, size){
        var pt = brd.create('point', [
    // perpendicular
            function(){
    const px = -uy, py = ux;
                var Cx = rect.center.X();
    const p1x = x, p1y = y;
                var Cy = rect.center.Y();
    const p2x = x - ux*size + px*size*0.5;
                var Tx = targetPoint.X();
    const p2y = y - uy*size + py*size*0.5;
                var Ty = targetPoint.Y();
    const p3x = x - ux*size - px*size*0.5;
                var dx = Tx - Cx;
    const p3y = y - uy*size - py*size*0.5;
                var dy = Ty - Cy;
    return `M ${p1x} ${p1y} L ${p2x} ${p2y} L ${p3x} ${p3y} Z`;
                // if direction is zero, return center
  }
                if(Math.abs(dx) < 1e-9 && Math.abs(dy) < 1e-9) return Cx;
                var tCandidates = [];


  // Edge structure: {fromNode, toNode, amount, circle, lineA, lineB, arrow}
                // check vertical sides x = xMin and xMax
  const edges = [];
                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);


  function makeConnection(fromNode, toNode, amount, yMid, xOffset){
                    var t2 = (rect.xMax() - Cx) / dx;
    const group = svgEl('g', {});
                    var y2 = Cy + t2 * dy;
    const circle = svgEl('circle', {class:'count-circle'});
                    if(t2>0 && y2 <= rect.yMax() + 1e-9 && y2 >= rect.yMin() - 1e-9) tCandidates.push(t2);
    const text = svgEl('text', {class:'count-text'});
                }
    const lineA = svgEl('path', {class:'edge-line', fill:'none'}); // from rect -> circle (path to allow potential future styling)
                // check horizontal sides y = yMin and yMax
    const lineB = svgEl('path', {class:'edge-line', fill:'none'});
                if(Math.abs(dy) > 1e-9) {
    const arrow = svgEl('path', {class:'edge-arrow'});
                    var t3 = (rect.yMin() - Cy) / dy;
    group.appendChild(lineA);
                    var x3 = Cx + t3 * dx;
    group.appendChild(lineB);
                    if(t3>0 && x3 <= rect.xMax() + 1e-9 && x3 >= rect.xMin() - 1e-9) tCandidates.push(t3);
    group.appendChild(circle);
    group.appendChild(text);
    group.appendChild(arrow);
    svg.appendChild(group);


    const e = {fromNode, toNode, amount, circle, text, lineA, lineB, arrow, yMid, xOffset};
                    var t4 = (rect.yMax() - Cy) / dy;
    edges.push(e);
                    var x4 = Cx + t4 * dx;
    updateEdge(e);
                    if(t4>0 && x4 <= rect.xMax() + 1e-9 && x4 >= rect.xMin() - 1e-9) tCandidates.push(t4);
  }
                }
                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;
    }


  function updateEdge(e){
    // ----- Punkt am Kreisrand in Richtung target -----
    // circle center is midpoint between centers with offset
    function edgePointCircle(circleCenter, R, targetPoint) {
    const cx = (e.fromNode.cx + e.toNode.cx)/2 + (e.xOffset||0);
        return brd.create('point', [
    const cy = e.yMid;
            function(){
    const R = 0.35;
                var cx = circleCenter.X(), cy = circleCenter.Y();
    // compute in logical coords
                var tx = targetPoint.X(), ty = targetPoint.Y();
    const pFrom = intersectRectBorder(e.fromNode, cx, cy);
                var dx = tx - cx, dy = ty - cy;
    const pTo  = intersectRectBorder(e.toNode, cx, cy);
                var d = Math.sqrt(dx*dx + dy*dy);
    const cIn = pointOnCircle(cx, cy, R, pFrom.x, pFrom.y);
                if(d < 1e-9) return cx;
    const cOut = pointOnCircle(cx, cy, R, pTo.x, pTo.y);
                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});
    }


     // convert to px
     // ----- Verbindungsaufbau: exakte Endpunkte und Kreis in der Mitte -----
     function px(p){ return [p.x*scale, p.y*scale + yOffset]; }
     function makeConnection(rectFrom, rectTo, amount, yMid, xOffset) {
    const pf = px(pFrom), pcIn = px(cIn), pcOut = px(cOut), pt = px(pTo);
        // create circle center as reactive point (midpoint plus optional x offset)
        var circleCenter = brd.create('point', [
            function(){ return (rectFrom.center.X() + rectTo.center.X())/2 + (xOffset||0); },
            function(){ return yMid; }
        ], {visible:false});


    // line A: from rect edge -> circle edge (no arrow)
        var circle = brd.create('circle', [circleCenter, 0.35], {strokeColor:'black', fillColor:'white'});
    lineAPath = `M ${pf[0]} ${pf[1]} L ${pcIn[0]} ${pcIn[1]}`;
        brd.create('text', [function(){return circleCenter.X();}, function(){return circleCenter.Y();}, amount],
    e.lineA.setAttribute('d', lineAPath);
            {anchorX:'middle', anchorY:'middle', fontSize:12});


    // line B: circle edge -> rect edge (arrowhead drawn separately)
        // compute edge points
    e.lineB.setAttribute('d', `M ${pcOut[0]} ${pcOut[1]} L ${pt[0]} ${pt[1]}`);
        var pFrom = edgePointRect(rectFrom, circleCenter);
        var pTo  = edgePointRect(rectTo, circleCenter);


    // circle
        var pCircleIn  = edgePointCircle(circleCenter, 0.35, pFrom);
    e.circle.setAttribute('cx', (cx*scale));
        var pCircleOut = edgePointCircle(circleCenter, 0.35, pTo);
    e.circle.setAttribute('cy', (cy*scale + yOffset));
    e.circle.setAttribute('r', R*scale);
    e.circle.setAttribute('class','count-circle');


    // text
        // line from rect -> circle (no arrowhead)
    e.text.setAttribute('x', cx*scale);
        brd.create('line', [pFrom, pCircleIn], {straightFirst:false, straightLast:false, strokeWidth:1.5});
    e.text.setAttribute('y', cy*scale + yOffset);
    e.text.textContent = e.amount;


    // arrow head: compute unit vector from cOut -> pTo
        // arrow from circle -> rect (arrow head at rect side)
    var ux = (pt[0]-pcOut[0]), uy = (pt[1]-pcOut[1]);
        brd.create('arrow', [pCircleOut, pTo], {strokeWidth:1.8});
    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');
  }
 
  // create nodes (logical coords)
  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');
 
  nodes.B1 = createNode('B1', 0.75, 3, 1.0, 0.6, 'B1');
  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');
 
  // create edges (with small xOffsets to avoid overlap)
  makeConnection(nodes.E1, nodes.B1, '2', 5.6, -0.2);
  makeConnection(nodes.E2, nodes.B1, '1', 5.6,  0.2);


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


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


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


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


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


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


  // re-update edges also when window resizes (visual)
    makeConnection(E1, B5, "1", 6, -0.25);
  window.addEventListener('resize', updateAllEdges);
    makeConnection(E4, B5, "2", 6,  0.25);
})();
});
</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=2307“