Skip to content

Latest commit

 

History

History
121 lines (92 loc) · 3.15 KB

preparing_mermaid.md

File metadata and controls

121 lines (92 loc) · 3.15 KB
Raw

Preparing Mermaid Images for Inclusion in IETF Internet Drafts

  1. Export the Mermaid diagram to a file. Use no styles that represent colors or fills.

node_case.mermaid:

graph LR
    1(("8955db5e<br/>NODE"))
    2["13941b48<br/>#quot;Alice#quot;"]
    3(["78d666eb<br/>ASSERTION"])
    4["db7dd21c<br/>#quot;knows#quot;"]
    5["13b74194<br/>#quot;Bob#quot;"]
    1 -->|subj| 2
    1 --> 3
    3 -->|pred| 4
    3 -->|obj| 5
    style 1 stroke-width:3.0px
    style 2 stroke-width:3.0px
    style 3 stroke-width:3.0px
    style 4 stroke-width:3.0px
    style 5 stroke-width:3.0px
    linkStyle 0 stroke-width:2.0px
    linkStyle 1 stroke-width:2.0px
    linkStyle 2 stroke-width:2.0px
    linkStyle 3 stroke-width:2.0px
Loading
  1. Use the mermaid command line tool to convert the mermaid file to PDF using the configuration file below.
mmdc --input images/mermaid/node_case.mermaid \
    --output images/pdf/node_case.pdf \
    --outputFormat pdf \
    --configFile mermaid_config.json

The mermaid_convert_to_pdf.sh script is set up to do this step.

mermaid_config.json:

{
    "theme": "default",
    "themeVariables": {
        "fontFamily": "sans-serif",
        "fontSize": "16px",

        "background": "transparent",
        "primaryTextColor" : "black",
        "primaryBorderColor" : "black",
        "primaryColor" : "transparent",
        "secondaryColor" : "transparent",
        "lineColor" : "black",

        "nodeBorder" : "black",
        "clusterBkg" : "transparent",
        "clusterBorder" : "black",
        "defaultLinkColor" : "black",
        "titleColor" : "black",
        "edgeLabelBackground" : "transparent",
        "mainBkg" : "transparent",
        "nodeTextColor" : "black"
    }
}

node_case.pdf:

  1. In Illustrator, flatten the image:
  • Release all clip groups.
  • Outline all text.
  • Ungroup all groups.
  • Remove the invisible border around the entire page.
  • Remove the smaller background fill path behind the content.

  1. Use the artboard tools to fit the artboard to the artwork, then expand the artboard to expand the artboard by 50 pixels on both axes.

  1. "Save As..." the file as SVG 1.2 Tiny:

  1. Use the svgcheck tool to repair nonconforming aspects of the file.
svgcheck -r \
    images/svg/node_case.svg \
    --out images/svg-validated/node_case.svg
  1. Remove x="0px" y="0px" and id="Layer_1" from the svg element:
sed -e "s/ x=\"0px\" y=\"0px\"//g" -i .backup images/svg-validated/node_case.svg
sed -e "s/ id=\"Layer_1\"//g" -i .backup images/svg-validated/node_case.svg
rm images/svg-validated/node_case.svg.backup

The postprocess_mermaid.sh script does steps 7 and 8.

  1. Embed the SVG in the markdown file:
<artwork type="svg"><svg...>
</svg></artwork>

Linking to the artwork is possible, but doesn't seem to work during submission:

<artwork type="svg" src="images/svg-validated/node_case.svg"/>