Design tool to show heights, widths, padding

Question

Does anyone know any tool that I can use to draw diagrams like these ? I am especially interested in the height and width markers.

Answer 1

Have a look at SVG graphics. Copy & Paste the following in a .svg file and open in your browser. You will get the point.

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="408px" height="194px" >

    <rect x="126px" y="52px" stroke="violet" style="stroke-width: 1px" width="157px" height="72px" fill="rgb(244,150,206)"/>
    <rect x="142px" y="52px" rx="4px" ry="4px" stroke="grey" style="stroke-width: 1px" width="122px" height="72px" fill="rgb(247,200,228)"/>
    <rect x="158px" y="53px" stroke="none"  width="90px" height="70px" fill="white"/>
    <text x="160" y="100" font-family="Verdana" font-size="25" fill="blue" > AGREE </text>

    <line x1="142px" y1="39px" x2="264" y2="39px" style="stroke:rgb(239,52,162);stroke-width:2" />
    <line x1="142px" y1="30px" x2="142" y2="48px" style="stroke:rgb(239,52,162);stroke-width:2" />
    <line x1="264px" y1="30px" x2="264" y2="48px" style="stroke:rgb(239,52,162);stroke-width:2" />

    <text x="167" y="30" font-family="Verdana" font-size="10" fill="rgb(243,134,198)" > 64dp min width </text>

    </svg>