Recipe

reproducing Bluefish's "Baking Recipe": a titled, green-bordered table of rows with LEFT-aligned text (the new text-align on marks).

Diagrams 474 × 353 <column><contains><define><item><rect><style><text>

Result

Source examples/recipe.svgn

<diagram padding="30" theme="light">
  <!-- reproducing Bluefish's "Baking Recipe": a titled, green-bordered table of
       rows with LEFT-aligned text (the new text-align on marks). -->
  <style>
    .card { fill: #ffffff; stroke: #40a03f; stroke-width: 2; }
    .cell { fill: #ffffff; stroke: #40a03f; stroke-width: 1; }
  </style>

  <define name="item">
    <rect class="cell" text-align="left" padding="12" width="360" height="34" label="${text}"/>
  </define>

  <column gap="10" align="start">
    <text text-align="left" font-weight="700" font-size="17"
          label="Dark Chocolate Brownies (makes 24 squares)"/>
    <contains class="card" padding="8" gap="0">
      <item text="Preheat oven to 325°F (160°C), grease pan"/>
      <item text="6 oz. (170 g) 70% cacao chocolate"/>
      <item text="6 oz. (170 g) butter"/>
      <item text="1-1/2 cup (300 g) granulated sugar"/>
      <item text="3 large eggs"/>
      <item text="1 tsp. (5 mL) vanilla extract"/>
      <item text="1 cup (125 g) all-purpose flour"/>
    </contains>
  </column>
</diagram>

Open the SVG →