@yrest/cli 0.11.0 → 0.11.1

package/dist/cli/index.mjs

@@ -1196,9 +1196,15 @@ function generateERData(storage) {
   const relations = storage.getRelations();
   const schema = storage.getSchema();
   const pivotTables = /* @__PURE__ */ new Set();
+  const pivotFKs = /* @__PURE__ */ new Map();
   for (const fields of Object.values(relations)) {
     for (const def of Object.values(fields)) {
-      if (def.type === "many2many") pivotTables.add(def.through);
+      if (def.type === "many2many") {
+        pivotTables.add(def.through);
+        if (!pivotFKs.has(def.through)) pivotFKs.set(def.through, /* @__PURE__ */ new Set());
+        pivotFKs.get(def.through).add(def.foreignKey);
+        pivotFKs.get(def.through).add(def.otherKey);
+      }
     }
   }
   const fkFields = /* @__PURE__ */ new Map();
@@ -1234,6 +1240,9 @@ function generateERData(storage) {
   for (const [source, fields] of Object.entries(relations)) {
     for (const [key, def] of Object.entries(fields)) {
       if (def.type === "many2many") {
+        const throughRels = relations[def.through] ?? {};
+        const fkRel = throughRels[def.foreignKey];
+        const otherRel = throughRels[def.otherKey];
         erRelations.push({
           source,
           target: def.target,
@@ -1241,9 +1250,14 @@ function generateERData(storage) {
           label: def.through,
           through: def.through,
           foreignKey: def.foreignKey,
-          otherKey: def.otherKey
+          otherKey: def.otherKey,
+          fkCarDirect: fkRel?.carDirect,
+          fkCarInverse: fkRel?.carInverse,
+          otherCarDirect: otherRel?.carDirect,
+          otherCarInverse: otherRel?.carInverse
         });
       } else {
+        if (pivotFKs.get(source)?.has(key)) continue;
         erRelations.push({
           source,
           target: def.target,
@@ -1269,7 +1283,15 @@ function erDiagramSection(data) {
 
   <div class="card" style="padding:0;overflow:hidden;position:relative;">
     <canvas id="er-canvas" style="width:100%;display:block;cursor:grab;"></canvas>
-    <button id="er-dl" title="Download PNG" style="position:absolute;top:10px;right:14px;background:#161b22;border:1px solid #30363d;color:#7d8590;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;line-height:1.4;">\u2193 PNG</button>
+    <div style="position:absolute;top:10px;right:14px;display:flex;gap:6px;align-items:center;">
+      <select id="er-scale" title="Download quality" style="background:#161b22;border:1px solid #30363d;color:#7d8590;padding:3px 6px;border-radius:6px;font-size:11px;cursor:pointer;">
+        <option value="1">1\xD7</option>
+        <option value="2">2\xD7</option>
+        <option value="3" selected>3\xD7</option>
+        <option value="4">4\xD7</option>
+      </select>
+      <button id="er-dl" title="Download PNG" style="background:#161b22;border:1px solid #30363d;color:#7d8590;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;line-height:1.4;">\u2193 PNG</button>
+    </div>
   </div>
 
   <script>${/*js*/
@@ -1279,7 +1301,7 @@ function erDiagramSection(data) {
     var D=${json};
 
     // \u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-    var NW=178,HH=34,FH=22,FP=10,ROW_GAP=44,COL_GAP=100,BR=8,BO=14,LGH=56;
+    var NW=178,HH=34,FH=22,FP=10,ROW_GAP=44,COL_GAP=100,BR=12,BO=16,LGH=84,MIN_GAP=10;
 
     var C={bg:'#0d1117',nb:'#161b22',nh:'#1c2128',pb:'#0d1117',ph:'#161b22',
       bo:'#30363d',bs:'#58a6ff',tx:'#e6edf3',mu:'#7d8590',
@@ -1319,6 +1341,30 @@ function erDiagramSection(data) {
       }
     });
 
+    // \u2500\u2500 Dynamic node width \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    function computeNodeWidths(){
+      nodes.forEach(function(n){
+        var e=n.e;
+        ctx.font='600 12px -apple-system,BlinkMacSystemFont,sans-serif';
+        var hdrW=FP+ctx.measureText(e.name).width+FP;
+        if(e.isPivot){
+          ctx.font='9px monospace';
+          hdrW+=ctx.measureText('pivot').width+FP;
+        }
+        var maxRow=hdrW;
+        e.fields.forEach(function(f){
+          var leftPad=FP+(f.pk||f.fk?16:0);
+          var rightPad=(f.required&&!f.pk?14:0)+FP;
+          ctx.font=(f.required&&!f.pk?'600 ':'')+'11px monospace';
+          var nw=ctx.measureText(f.name).width;
+          ctx.font='10px monospace';
+          var tw=ctx.measureText(f.type).width;
+          maxRow=Math.max(maxRow,leftPad+nw+MIN_GAP+tw+rightPad);
+        });
+        n.w=Math.max(NW,Math.ceil(maxRow));
+      });
+    }
+
     // \u2500\u2500 Layered layout (simplified Sugiyama) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
     var groups=[];
 
@@ -1357,7 +1403,8 @@ function erDiagramSection(data) {
                 median(adj[b].map(function(x){return np[x]!=null?np[x]:0;}));
         });
       }
-      var colW=NW+COL_GAP;
+      var maxNW=nodes.reduce(function(m,n){return Math.max(m,n.w);},NW);
+      var colW=maxNW+COL_GAP;
       var totalW=(maxL+1)*colW-COL_GAP;
       var startX=Math.max(20,(W-totalW)/2);
       for(var l=0;l<=maxL;l++){
@@ -1405,37 +1452,37 @@ function erDiagramSection(data) {
 
     var badges=[];
 
-    function pushBadge(x,y,ux,uy,many,col){
-      badges.push({x:x,y:y,ux:ux,uy:uy,many:many,col:col});
+    // \u2500\u2500 SVG cardinality badges via Path2D \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    // SVG orientation: LEFT side touches the node, RIGHT side connects to the line.
+    // Rotation = Math.atan2(uy,ux) aligns local +x with the outward (away-from-node) direction.
+    var P2D={
+      '1..1':new Path2D('M75 40C75 59.33 59.33 75 40 75C20.67 75 5 59.33 5 40C5 20.67 20.67 5 40 5C59.33 5 75 20.67 75 40ZM41 26C41 24.3431 39.6569 23 38 23C36.3431 23 35 24.3431 35 26V37H26V26C26 24.3431 24.6569 23 23 23C21.3431 23 20 24.3431 20 26V37H15C13.3431 37 12 38.3431 12 40C12 41.6569 13.3431 43 15 43H20V54C20 55.6569 21.3431 57 23 57C24.6569 57 26 55.6569 26 54V43H35V54C35 55.6569 36.3431 57 38 57C39.6569 57 41 55.6569 41 54V43H66C67.6569 43 69 41.6569 69 40C69 38.3431 67.6569 37 66 37H41V26Z'),
+      '1..n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM44.9862 42.9025L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025H32.9862L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L44.9862 36.9025H46V26C46 24.3431 47.3431 23 49 23C50.6569 23 52 24.3431 52 26V36.9025H68C69.6569 36.9025 71 38.2457 71 39.9025C71 41.5594 69.6569 42.9025 68 42.9025H52V53C52 54.6569 50.6569 56 49 56C47.3431 56 46 54.6569 46 53V42.9025H44.9862Z'),
+      '0..1':new Path2D('M75 40C75 59.33 59.33 75 40 75C20.67 75 5 59.33 5 40C5 20.67 20.67 5 40 5C59.33 5 75 20.67 75 40ZM23 57C24.6569 57 26 55.6569 26 54V43H33.3781C34.7102 48.1757 39.4085 52 45 52C50.5915 52 55.2898 48.1757 56.6219 43H66C67.6569 43 69 41.6569 69 40C69 38.3431 67.6569 37 66 37H56.6219C55.2898 31.8243 50.5915 28 45 28C39.4085 28 34.7102 31.8243 33.3781 37H26V26C26 24.3431 24.6569 23 23 23C21.3431 23 20 24.3431 20 26V37H15C13.3431 37 12 38.3431 12 40C12 41.6569 13.3431 43 15 43H20V54C20 55.6569 21.3431 57 23 57ZM51 40C51 41.0929 50.7078 42.1175 50.1973 43C49.1599 44.7934 47.2208 46 45 46C42.7792 46 40.8401 44.7934 39.8027 43C39.2922 42.1175 39 41.0929 39 40C39 38.9071 39.2922 37.8825 39.8027 37C40.8401 35.2066 42.7792 34 45 34C47.2208 34 49.1599 35.2066 50.1973 37C50.7078 37.8825 51 38.9071 51 40Z'),
+      '0..n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM17 42.9025C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025H32.9862L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L45.4091 36.8818L45.4036 36.9025H45.445L45.4091 36.8818C46.7819 31.7662 51.4511 28 57 28C62.579 28 67.2687 31.8072 68.6129 36.9652C69.9758 37.2481 71 38.4557 71 39.9025C71 41.331 70.0017 42.5262 68.6647 42.8286C67.3931 48.091 62.6531 52 57 52C51.3734 52 46.6513 48.1276 45.3534 42.9025H44.9862L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17ZM62.1397 36.9025C61.0891 35.163 59.1804 34 57 34C54.8196 34 52.9109 35.163 51.8603 36.9025C51.3142 37.8067 51 38.8667 51 40C51 41.0529 51.2712 42.0424 51.7475 42.9025C52.7704 44.7496 54.7392 46 57 46C59.2608 46 61.2296 44.7496 62.2525 42.9025C62.7288 42.0424 63 41.0529 63 40C63 38.8667 62.6858 37.8067 62.1397 36.9025Z'),
+      'n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM17 36.9025H33.0677L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L44.9862 36.9025H68C69.6569 36.9025 71 38.2457 71 39.9025C71 41.5594 69.6569 42.9025 68 42.9025H44.9862L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025Z')
+    };
+
+    function pushBadge(x,y,ux,uy,car,col){
+      badges.push({x:x,y:y,ux:ux,uy:uy,car:car,col:col});
     }
 
-    // Badge: solid colored circle; crow's foot (many) or double-bar (one) in dark ink inside.
-    // ux,uy points outward from the node \u2014 badge is offset BO px into the gap.
-    // Crow's foot tines open toward the node (-x in rotated frame), tip toward line (+x).
     function drawBadge(b){
-      var bx=b.x+b.ux*BO,by=b.y+b.uy*BO;
-      ctx.fillStyle=b.col;ctx.strokeStyle=b.col;ctx.lineWidth=1;
-      ctx.beginPath();ctx.arc(bx,by,BR,0,Math.PI*2);ctx.fill();ctx.stroke();
-      ctx.save();ctx.translate(bx,by);ctx.rotate(Math.atan2(b.uy,b.ux));
-      ctx.strokeStyle=C.bg;ctx.lineWidth=1.4;ctx.lineCap='round';
-      ctx.beginPath();
-      if(b.many){
-        ctx.moveTo(-5,-4);ctx.lineTo(5,0);  // upper tine \u2192 tip
-        ctx.moveTo(-5,4);ctx.lineTo(5,0);   // lower tine \u2192 tip
-        ctx.moveTo(-5,0);ctx.lineTo(5,0);   // center line
-        ctx.moveTo(-5,-4);ctx.lineTo(-5,4); // base bar (near node)
-      }else{
-        ctx.moveTo(-3,-5);ctx.lineTo(-3,5); // near bar
-        ctx.moveTo(2,-5);ctx.lineTo(2,5);   // far bar
-      }
-      ctx.stroke();
+      var p=P2D[b.car]||P2D['n'],sc=BR/40;
+      ctx.save();
+      ctx.translate(b.x+b.ux*BO,b.y+b.uy*BO);
+      ctx.rotate(Math.atan2(b.uy,b.ux));
+      ctx.scale(sc,sc);
+      ctx.translate(-40,-40);
+      ctx.fillStyle=b.col;
+      ctx.fill(p,'evenodd');
       ctx.restore();
     }
 
     function ecol(t){return t==='one2one'?C.o2o:t==='many2many'?C.m2m:C.m2o;}
 
     // offset: pixels to shift perpendicular to the edge direction (for parallel edges)
-    function drawEdgeLine(a,b,col,dashed,label,manyA,manyB,off){
+    function drawEdgeLine(a,b,col,dashed,label,carA,carB,off){
       var p1=edgePt(a,b.x+b.w/2,b.y+b.h/2);
       var p2=edgePt(b,a.x+a.w/2,a.y+a.h/2);
       var dx=p2.x-p1.x,dy=p2.y-p1.y,d=Math.sqrt(dx*dx+dy*dy)||1;
@@ -1446,13 +1493,19 @@ function erDiagramSection(data) {
       ctx.setLineDash(dashed?[5,4]:[]);
       ctx.beginPath();ctx.moveTo(q1x,q1y);ctx.lineTo(q2x,q2y);ctx.stroke();
       ctx.setLineDash([]);
-      pushBadge(q1x,q1y,ux,uy,manyA,col);
-      pushBadge(q2x,q2y,-ux,-uy,manyB,col);
+      pushBadge(q1x,q1y,ux,uy,carA,col);
+      pushBadge(q2x,q2y,-ux,-uy,carB,col);
       if(label){
         var mx=(q1x+q2x)/2,my=(q1y+q2y)/2;
+        var la=Math.atan2(uy,ux);
+        if(la>Math.PI/2||la<-Math.PI/2)la+=Math.PI; // keep text readable
+        var ls=off>0?11:-11; // alternate above/below for parallel edges
+        ctx.save();
+        ctx.translate(mx,my);
+        ctx.rotate(la);
         ctx.fillStyle=C.mu;ctx.font='10px monospace';ctx.textAlign='center';ctx.textBaseline='middle';
-        ctx.fillText(label,mx-uy*14,my+ux*14);
-        ctx.textBaseline='alphabetic';
+        ctx.fillText(label,0,ls);
+        ctx.restore();
       }
     }
 
@@ -1468,14 +1521,14 @@ function erDiagramSection(data) {
         var col=ecol(r.type);
         if(r.type==='many2many'&&r.through&&nIdx[r.through]!=null){
           var sn=nodes[nIdx[r.source]],pn=nodes[nIdx[r.through]],tn=nodes[nIdx[r.target]];
-          if(sn&&pn)edges.push({a:sn,b:pn,col:col,dashed:true,label:r.foreignKey||'',manyA:false,manyB:true,off:0});
-          if(tn&&pn)edges.push({a:tn,b:pn,col:col,dashed:true,label:r.otherKey||'',manyA:false,manyB:true,off:0});
+          if(sn&&pn)edges.push({a:sn,b:pn,col:col,dashed:true,label:r.foreignKey||'',carA:r.fkCarDirect||'1..1',carB:r.fkCarInverse||'0..n',off:0});
+          if(tn&&pn)edges.push({a:tn,b:pn,col:col,dashed:true,label:r.otherKey||'',carA:r.otherCarDirect||'1..1',carB:r.otherCarInverse||'0..n',off:0});
         }else{
           var sn=nodes[nIdx[r.source]],tn=nodes[nIdx[r.target]];
           if(sn&&tn&&sn!==tn){
-            var manyA=r.carInverse?r.carInverse.endsWith('n'):r.type!=='one2one';
-            var manyB=r.carDirect?r.carDirect.endsWith('n'):r.type==='many2many';
-            edges.push({a:sn,b:tn,col:col,dashed:false,label:r.label,manyA:manyA,manyB:manyB,off:0});
+            var carA=r.carInverse||(r.type!=='one2one'?'1..n':'1..1');
+            var carB=r.carDirect||(r.type==='many2many'?'1..n':'1..1');
+            edges.push({a:sn,b:tn,col:col,dashed:false,label:r.label,carA:carA,carB:carB,off:0});
           }
         }
       });
@@ -1534,12 +1587,24 @@ function erDiagramSection(data) {
 
     function drawLegend(){
       var cvW=cv.width/dpr,cvH=cv.height/dpr;
-      var y0=cvH-LGH,y1=cvH-LGH+18,y2=cvH-LGH+38;
+      var yL=cvH-LGH,y1=yL+13,y2=yL+35,y3=yL+62;
 
       ctx.fillStyle='#161b22';
-      ctx.fillRect(0,y0,cvW,LGH);
+      ctx.fillRect(0,yL,cvW,LGH);
       ctx.strokeStyle='#30363d';ctx.lineWidth=1;
-      ctx.beginPath();ctx.moveTo(0,y0);ctx.lineTo(cvW,y0);ctx.stroke();
+      ctx.beginPath();ctx.moveTo(0,yL);ctx.lineTo(cvW,yL);ctx.stroke();
+
+      function legendBadge(cx,cy,car,col,angle){
+        var p=P2D[car]||P2D['n'],sc=8/40;
+        ctx.save();
+        ctx.translate(cx,cy);
+        ctx.rotate(angle);
+        ctx.scale(sc,sc);
+        ctx.translate(-40,-40);
+        ctx.fillStyle=col;
+        ctx.fill(p,'evenodd');
+        ctx.restore();
+      }
 
       // Row 1: relation line types
       var types=[
@@ -1558,42 +1623,43 @@ function erDiagramSection(data) {
         x+=18+ctx.measureText(it.l).width+22;
       });
 
-      // Row 2: cardinality symbols
-      function badge2(cx,cy,many,col){
-        ctx.fillStyle=col;ctx.strokeStyle=col;ctx.lineWidth=1;
-        ctx.beginPath();ctx.arc(cx,cy,6,0,Math.PI*2);ctx.fill();
-        ctx.save();ctx.translate(cx,cy);
-        ctx.strokeStyle=C.bg;ctx.lineWidth=1.2;ctx.lineCap='round';
-        ctx.beginPath();
-        if(many){
-          ctx.moveTo(-4,-3);ctx.lineTo(4,0);ctx.moveTo(-4,3);ctx.lineTo(4,0);
-          ctx.moveTo(-4,0);ctx.lineTo(4,0);ctx.moveTo(-4,-3);ctx.lineTo(-4,3);
-        }else{
-          ctx.moveTo(-2,-3);ctx.lineTo(-2,3);ctx.moveTo(2,-3);ctx.lineTo(2,3);
-        }
-        ctx.stroke();ctx.restore();
-      }
-
-      ctx.font='10px monospace';ctx.textAlign='left';ctx.textBaseline='middle';
+      // Row 2: relation type examples (pair of badges + line)
       x=14;
       var pairs=[
-        {a:false,b:true,col:C.m2o,l:'many2one (N:1)'},
-        {a:false,b:false,col:C.o2o,l:'one2one (1:1)'},
-        {a:false,b:true,col:C.m2m,l:'pivot edge (1:N)'}
+        {carA:'1..n',carB:'1..1',col:C.m2o,l:'many2one (N:1)'},
+        {carA:'1..1',carB:'1..1',col:C.o2o,l:'one2one (1:1)'},
+        {carA:'1..1',carB:'0..n',col:C.m2m,l:'pivot edge (1:0..N)'}
       ];
       pairs.forEach(function(p){
         ctx.strokeStyle=p.col+'55';ctx.lineWidth=1.2;ctx.setLineDash(p.col===C.m2m?[4,3]:[]);
         ctx.beginPath();ctx.moveTo(x+8,y2);ctx.lineTo(x+56,y2);ctx.stroke();
         ctx.setLineDash([]);
-        badge2(x+8,y2,p.a,p.col);
-        badge2(x+56,y2,p.b,p.col);
+        legendBadge(x+8,y2,p.carA,p.col,0);
+        legendBadge(x+56,y2,p.carB,p.col,Math.PI);
         ctx.fillStyle=C.mu;ctx.font='10px monospace';ctx.textAlign='left';ctx.textBaseline='middle';
         ctx.fillText(p.l,x+66,y2);
         x+=66+ctx.measureText(p.l).width+24;
       });
 
+      // Row 3: individual symbol meanings
+      var symbols=[
+        {car:'1..1',l:'exactly one'},
+        {car:'0..1',l:'zero or one'},
+        {car:'1..n',l:'one or more'},
+        {car:'0..n',l:'zero or more'},
+        {car:'n',  l:'many (pivot)'}
+      ];
+      x=14;
+      ctx.font='10px monospace';ctx.textAlign='left';ctx.textBaseline='middle';
+      symbols.forEach(function(s){
+        legendBadge(x+8,y3,s.car,C.mu,0);
+        ctx.fillStyle=C.mu;
+        ctx.fillText(s.l,x+20,y3);
+        x+=20+ctx.measureText(s.l).width+18;
+      });
+
       ctx.fillStyle='#3d444d';ctx.font='10px monospace';ctx.textAlign='right';ctx.textBaseline='middle';
-      ctx.fillText('drag  \xB7  scroll to zoom  \xB7  dbl-click to reset',cvW-14,y2);
+      ctx.fillText('drag  \xB7  scroll to zoom  \xB7  dbl-click to reset',cvW-14,y1);
       ctx.textBaseline='alphabetic';
     }
 
@@ -1605,7 +1671,7 @@ function erDiagramSection(data) {
       ctx.save();ctx.translate(pan.x,pan.y);ctx.scale(zm,zm);
       badges=[];
       var edges=collectEdges();
-      edges.forEach(function(e){drawEdgeLine(e.a,e.b,e.col,e.dashed,e.label,e.manyA,e.manyB,e.off);});
+      edges.forEach(function(e){drawEdgeLine(e.a,e.b,e.col,e.dashed,e.label,e.carA,e.carB,e.off);});
       nodes.forEach(function(n){drawNode(n);});
       badges.forEach(function(b){drawBadge(b);});
       ctx.restore();
@@ -1651,14 +1717,21 @@ function erDiagramSection(data) {
     });
 
     document.getElementById('er-dl').addEventListener('click',function(){
-      var SCALE=3;
-      var cw=cv.width/dpr,ch=cv.height/dpr;
+      var SCALE=parseInt(document.getElementById('er-scale').value,10)||3;
+      var pad=36;
+      var bx0=1e9,by0=1e9,bx1=-1e9,by1=-1e9;
+      nodes.forEach(function(n){
+        bx0=Math.min(bx0,n.x);by0=Math.min(by0,n.y);
+        bx1=Math.max(bx1,n.x+n.w);by1=Math.max(by1,n.y+n.h);
+      });
+      var cw=bx1-bx0+pad*2,ch=by1-by0+pad*2+LGH;
       var oc=document.createElement('canvas');
       oc.width=Math.round(cw*SCALE);oc.height=Math.round(ch*SCALE);
-      var sav={cv:cv,ctx:ctx,dpr:dpr};
+      var sav={cv:cv,ctx:ctx,dpr:dpr,px:pan.x,py:pan.y,zm:zm};
       cv=oc;ctx=oc.getContext('2d');dpr=SCALE;
+      pan.x=pad-bx0;pan.y=pad-by0;zm=1;
       draw();
-      cv=sav.cv;ctx=sav.ctx;dpr=sav.dpr;
+      cv=sav.cv;ctx=sav.ctx;dpr=sav.dpr;pan.x=sav.px;pan.y=sav.py;zm=sav.zm;
       var a=document.createElement('a');
       a.download='er-diagram.png';a.href=oc.toDataURL('image/png');a.click();
     });
@@ -1666,6 +1739,7 @@ function erDiagramSection(data) {
     // \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
     requestAnimationFrame(function(){
       resize();
+      computeNodeWidths();
       var r=cv.getBoundingClientRect();
       computeLayout(r.width,r.height);
       var h=requiredH();