figure-1.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="719" height="354">
  <style type="text/css">
    rect.box {
        fill: white;
        stroke: black;
        stroke-width: 1px;
    }
    path.a {
        fill: none;
        stroke: black;
        stroke-width: 2px;
        marker-end: url(#arrowhead);
    }
    path.d { stroke-dasharray: 2,2; }
    text { font-family: Helvetica, Arial, Liberation Sans, sans-serif; }
    text.pn { font-family: "Courier New", monospace; }
    text.on { font-weight: bold; }
    text.ons { font-weight: bold; font-size: 60%; }
  </style>
  <defs>
    <marker id="arrowhead" viewBox="0 0 15 10" refX="0" refY="5"
        markerUnits="userSpaceOnUse" markerWidth="9" markerHeight="6"
        orient="auto">
      <path d="M 0 0 L 15 5 L 0 10 z" />
    </marker>
    <g id="instance" width="50" height="101">
      <rect class="box" x=".5" y=".5" width="49" height="100" />
      <text class="pn" x="14" y="56">q1</text>
      <text class="pn" x="14" y="79">q2</text>
      <text class="on" x="10" y="22">cf</text>
    </g>
  </defs>
  <g font-size="14.5">
    <rect class="box" x="0.5" y="0.5" width="718" height="353" />
    <!-- legend -->
    <path class="a d" d="M 457,25 616,25" />
    <text x="470" y="51" font-size="13.5">implicit prototype link</text>
    <path class="a s" d="M 456,80 616,80" />
    <text x="469" y="106" font-size="12.5">explicit prototype property</text>

    <!-- CF -->
    <rect class="box" x="80.5" y="25.5" width="144" height="117" />
    <text x="89" y="57" font-weight="bold">CF</text>
    <path class="a d" d="M 80,37 42,37 42,23" />
    <text class="pn" x="95" y="75">prototype</text>
    <text class="pn" x="95" y="96">P1</text>
    <text class="pn" x="95" y="117">P2</text>
    <path class="a s" d="M 175,70 260,70" />

    <!-- CFp -->
    <rect class="box" x="268.5" y="59.5" width="79" height="88" />
    <path class="a d" d="M 348,81 380,81 380,23" />
    <text class="on" x="283" y="79">CF</text>
    <text class="ons" x="304" y="81">p</text>
    <text class="pn" x="287" y="113">CFP1</text>

    <!-- instances -->
    <use xlink:href="#instance" x="79" y="240" />
    <text class="ons" x="103" y="264">1</text>
    <path class="a d" d="M 79,249 45,249 45,194 270,194 270,155" />
    <use xlink:href="#instance" x="184" y="240" />
    <text class="ons" x="208" y="264">2</text>
    <path class="a d" d="M 184,246 160,246 160,208 281,208 281,155" />
    <use xlink:href="#instance" x="290" y="240" />
    <text class="ons" x="314" y="264">3</text>
    <path class="a d" d="M 305,240 305,155" />
    <use xlink:href="#instance" x="396" y="240" />
    <text class="ons" x="420" y="264">4</text>
    <path class="a d" d="M 447,250 469,250 469,207 333,207 333,155" />
    <use xlink:href="#instance" x="502" y="240" />
    <text class="ons" x="526" y="264">5</text>
    <path class="a d" d="M 553,251 579,251 579,197 346,197 346,155" />
  </g>
</svg>