enable generate markup enhanced markdown file with Obsidian canvas

[hailiang-wang]

Obsidian Canvas is a mindmap of Obsidian notes. Canvas also supports groups, cards, links, which make it very powerful for thinking and writing.

Help

After installing markup-markdown, canvas command are added into PATH.

Rules

• Children nodes or text cards are linked with parent node by link, parent is the fromNode, child is the toNode(receive arrow).
• Children nodes or text cards are sorted with altitude, upper the position(smaller Y value, see axis below), come in top in the markup markdown.

ENV

canvas command recognize below variable in ENV.

ENV Variable Name	Value	Description
EXCERPT_PAGE_TITLE	String, default ''	Title value in excerpt of the markdown file
EXCERPT_URL	String, default ''	Url value in excerpt of the markdown file
EXCERPT_LANG	'cn' or 'en', default 'cn'	lang used as primary language in markup
EXCERPT_TAGS	tag1,tag2, default pipeline,index	tags set into excerpt as metadata

Labels

Label	Type	Value	Description
ap_former_page_break_no	Flag	Omit	Avoid appending page break xml before appending content. Default appending.
ap_tail_page_break_no	Flag	Omit	Avoid appending page break xml after appending content . Default appending.
ap_heading_level	KeyValue	"None" or positive integer, such as 1, 2	Append headings for content, headings down. Default 1

Canvas Sample

[hailiang-wang]

xx.canvas file is in below format, raw json.

{
    "nodes":[
        {"type":"text","text":"root","id":"1f30eddad51710e4","x":-420,"y":-280,"width":200,"height":60},
        {"type":"file","file":"notes/2303261040.md","id":"98977e30971a598e","x":-80,"y":-315,"width":400,"height":130},
        {"type":"file","file":"notes/2303261047.md","id":"98c0a6f954857102","x":-80,"y":-85,"width":400,"height":400},
        {"type":"text","text":"FOO","id":"fbb65b30199c225f","x":560,"y":520,"width":250,"height":60}
    ],
    "edges":[
        {"id":"e25d15f99c8c2fcc","fromNode":"1f30eddad51710e4","fromSide":"right","toNode":"98977e30971a598e","toSide":"left","label":"HA=1\nB=1"},
        {"id":"be9b964fee986806","fromNode":"1f30eddad51710e4","fromSide":"bottom","toNode":"fbb65b30199c225f","toSide":"left"},
        {"id":"fee0d961ae334fcd","fromNode":"1f30eddad51710e4","fromSide":"bottom","toNode":"98c0a6f954857102","toSide":"left"}
    ]
}

When considering generate a markdown file with canvas, the coordinate system is like below.

By navigating children of root node, and sorting siblings with XY axis, also parsing attributes in link label, it generates a markup markdown file.

[hailiang-wang]

Even group is very useful, but nodes and edges are good enough for generating markdown file.

[hailiang-wang]

Labels

Label is convenient to add some configuration information: attributes.

Attributes are separated by line break, \n, e.g. NAME=VALUE\nFLAG1\nNAME2=VALUE2

Attributes can be set with KeyValue or FLAG

[hailiang-wang]

Tree data transformed from canvas json

For a given canvas raw file, get the children data for a node as below, as a tree layout.

 [
  {
    "type": "text",
    "text": "FOO",
    "id": "fbb65b30199c225f",
    "x": -70,
    "y": -660,
    "width": 250,
    "height": 60,
    "edge": {
      "id": "be9b964fee986806",
      "fromNode": "1f30eddad51710e4",
      "fromSide": "bottom",
      "toNode": "fbb65b30199c225f",
      "toSide": "left"
    },
    "children": []
  },
  {
    "type": "file",
    "file": "notes/2303261047.md",
    "id": "98c0a6f954857102",
    "x": -80,
    "y": -85,
    "width": 400,
    "height": 400,
    "edge": {
      "id": "fee0d961ae334fcd",
      "fromNode": "1f30eddad51710e4",
      "fromSide": "bottom",
      "toNode": "98c0a6f954857102",
      "toSide": "left"
    },
    "children": []
  },
  {
    "type": "file",
    "file": "notes/2303261040.md",
    "id": "98977e30971a598e",
    "x": -120,
    "y": 440,
    "width": 260,
    "height": 175,
    "edge": {
      "id": "e25d15f99c8c2fcc",
      "fromNode": "1f30eddad51710e4",
      "fromSide": "right",
      "toNode": "98977e30971a598e",
      "toSide": "left",
      "label": "HA=1\nB=1"
    },
    "children": [
      {
        "id": "a4aa70ec09702da7",
        "x": 340,
        "y": -267,
        "width": 250,
        "height": 60,
        "type": "text",
        "text": "fiio2",
        "edge": {
          "id": "7d8eb6ac1366f086",
          "fromNode": "98977e30971a598e",
          "fromSide": "right",
          "toNode": "a4aa70ec09702da7",
          "toSide": "bottom"
        },
        "children": []
      },
      {
        "id": "803771a6e597a7f2",
        "x": 465,
        "y": 20,
        "width": 250,
        "height": 60,
        "type": "text",
        "text": "bar",
        "edge": {
          "id": "ac13b1d46c90bfce",
          "fromNode": "98977e30971a598e",
          "fromSide": "right",
          "toNode": "803771a6e597a7f2",
          "toSide": "top"
        },
        "children": []
      }
    ]
  }
]