1import{_ as a,a as s}from"./chunks/cat1.CDpGg14X.js";import{_ as d,c as p,o as h,j as e,ag as g,a as t}from"./chunks/framework.CPHm90Yq.js";const l="/disagree-icon.svg",o="/agree-icon.svg",i="/dog2.jpg",n="/cat2.jpg",b=JSON.parse('{"title":"Adding images","description":"","frontmatter":{"title":"Adding images","meta":[{"name":"description","content":"How to add images to argument and statement nodes."}]},"headers":[],"relativePath":"guide/adding-images.md","filePath":"guide/adding-images.md"}'),c={name:"guide/adding-images.md"};function m(f,r,x,u,w,k){return h(),p("div",null,[...r[0]||(r[0]=[e("h1",{id:"adding-images",tabindex:"-1"},[t("Adding images "),e("a",{class:"header-anchor",href:"#adding-images","aria-label":'Permalink to "Adding images"'},"â")],-1),e("p",null,"Images can serve different functions in your map:",-1),e("ul",null,[e("li",null,"icons can visualize different categories of statements or arguments (similar to using colors)"),e("li",null,"let a node stand out and make it instantly recognizable"),e("li",null,"liven up the look of your map a little")],-1),e("p",null,"At the moment, images are only supported for the Viz.js maps, not for Dagre or GraphML maps.",-1),e("p",null,"To add an image, you first have to tell Argdown the dimensions and file path in the frontmatter section (or use a tool that does that for you, see below). You can give your image a short id that you can use to assign it to statements or arguments.",-1),e("p",null,'Here is how you add this information in the frontmatter section for the "dog1.jpg" image:',-1),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"source"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 2images: 3 files: 4 dog1: {path: "dog1.jpg", width: 100, height: 85} 5===`),t(` 6`),e("span",{class:"hljs-comment"},"// ...")])])]),e("div",{slot:"map"},[e("svg",{width:"8pt",height:"8pt",viewBox:"0.00 0.00 8.00 8.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 4)"},[e("title",null,"Argument Map")])])])])],-1),g("",6),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"map"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 7images: 8 files: 9 agree: {path: "/agree-icon.svg", width: 20, height: 20} 10 disagree: {path: "/disagree-icon.svg", width: 20, height: 20} 11color: 12 colorScheme: iwanthue-green-mint 13dot: 14 argument: 15 minWidth: 100 16 statement: 17 minWidth: 100 18===`),t(` 19 20`),e("span",{class:"hljs-argument-title"},"<a1>"),t(),e("span",{class:"hljs-tag"},"#pro"),t(),e("span",{class:"hljs-tag"},"#agree"),t(` 21`),e("span",{class:"hljs-support"}," +>"),t(),e("span",{class:"hljs-statement-title"},"[s1]"),t(),e("span",{class:"hljs-tag"},"#pro"),t(),e("span",{class:"hljs-tag"},"#disagree"),t(` 22`),e("span",{class:"hljs-support"}," <+"),t(),e("span",{class:"hljs-statement-title"},"[s2]"),t(),e("span",{class:"hljs-tag"},"#pro"),t(),e("span",{class:"hljs-tag"},"#agree"),t(` 23 24`),e("span",{class:"hljs-argument-title"},"<a2>"),t(),e("span",{class:"hljs-tag"},"#pro"),t(),e("span",{class:"hljs-tag"},"#disagree"),t(` 25`),e("span",{class:"hljs-support"}," +>"),t(),e("span",{class:"hljs-statement-title"},"[s1]"),t(` 26`),e("span",{class:"hljs-attack"}," <-"),t(),e("span",{class:"hljs-argument-title"},"<a4>"),t(),e("span",{class:"hljs-tag"},"#con"),t(),e("span",{class:"hljs-tag"},"#agree"),t(` 27 28`),e("span",{class:"hljs-argument-title"},"<a3>"),t(),e("span",{class:"hljs-tag"},"#con"),t(),e("span",{class:"hljs-tag"},"#disagree"),t(` 29`),e("span",{class:"hljs-attack"}," ->"),t(),e("span",{class:"hljs-statement-title"},"[s1]")])])]),e("div",{slot:"map"},[e("svg",{width:"526pt",height:"122pt",viewBox:"0.00 0.00 526.00 122.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 117.84)"},[e("title",null,"Argument Map"),e("g",{id:"node1",class:"node"},[e("title",null,"n0"),e("g",{id:"a_node1"},[e("a",{"xlink:title":"s1"},[e("path",{fill:"white",stroke:"#dfd84b","stroke-width":"2",d:"M505.84,-113.84C505.84,-113.84 414,-113.84 414,-113.84 408,-113.84 402,-107.84 402,-101.84 402,-101.84 402,-86.92 402,-86.92 402,-80.92 408,-74.92 414,-74.92 414,-74.92 505.84,-74.92 505.84,-74.92 511.84,-74.92 517.84,-80.92 517.84,-86.92 517.84,-86.92 517.84,-101.84 517.84,-101.84 517.84,-107.84 511.84,-113.84 505.84,-113.84"}),e("image",{"xlink:href":l,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"454.42",y:"-107.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"454.36",y:"-84.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"s1")])])]),e("g",{id:"node2",class:"node"},[e("title",null,"n1"),e("g",{id:"a_node2"},[e("a",{"xlink:title":"s2"},[e("path",{fill:"white",stroke:"#dfd84b","stroke-width":"2",d:"M103.84,
29-113.84C103.84,-113.84 12,-113.84 12,-113.84 6,-113.84 0,-107.84 0,-101.84 0,-101.84 0,-86.92 0,-86.92 0,-80.92 6,-74.92 12,-74.92 12,-74.92 103.84,-74.92 103.84,-74.92 109.84,-74.92 115.84,-80.92 115.84,-86.92 115.84,-86.92 115.84,-101.84 115.84,-101.84 115.84,-107.84 109.84,-113.84 103.84,-113.84"}),e("image",{"xlink:href":o,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"52.42",y:"-107.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"52.36",y:"-84.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"s2")])])]),e("g",{id:"node3",class:"node"},[e("title",null,"n2"),e("g",{id:"a_node3"},[e("a",{"xlink:title":"a1"},[e("path",{fill:"#dfd84b",stroke:"black",d:"M237.84,-113.84C237.84,-113.84 146,-113.84 146,-113.84 140,-113.84 134,-107.84 134,-101.84 134,-101.84 134,-86.92 134,-86.92 134,-80.92 140,-74.92 146,-74.92 146,-74.92 237.84,-74.92 237.84,-74.92 243.84,-74.92 249.84,-80.92 249.84,-86.92 249.84,-86.92 249.84,-101.84 249.84,-101.84 249.84,-107.84 243.84,-113.84 237.84,-113.84"}),e("image",{"xlink:href":o,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"186.42",y:"-107.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"186.36",y:"-84.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"a1")])])]),e("g",{id:"edge2",class:"edge"},[e("title",null,"n1->n2"),e("g",{id:"a_edge2"},[e("a",{"xlink:title":"support"},[e("path",{fill:"none",stroke:"#00ff00",d:"M116.28,-94.38C118.28,-94.38 120.28,-94.38 122.28,-94.38"}),e("polygon",{fill:"#00ff00",stroke:"#00ff00",points:"122.2,-97.88 132.2,-94.38 122.2,-90.88 122.2,-97.88"})])])]),e("g",{id:"edge1",class:"edge"},[e("title",null,"n2->n0"),e("g",{id:"a_edge1"},[e("a",{"xlink:title":"support"},[e("path",{fill:"none",stroke:"#00ff00",d:"M223.98,-74.51C237.09,-67.49 252.73,-60.46 267.92,-56.92 318.13,-45.22 333.71,-45.22 383.92,-56.92 395.31,-59.57 406.95,-64.19 417.6,-69.3"}),e("polygon",{fill:"#00ff00",stroke:"#00ff00",points:"416.01,-72.42 426.51,-73.83 419.18,-66.18 416.01,-72.42"})])])]),e("g",{id:"node4",class:"node"},[e("title",null,"n3"),e("g",{id:"a_node4"},[e("a",{"xlink:title":"a2"},[e("path",{fill:"#dfd84b",stroke:"black",d:"M371.84,-113.84C371.84,-113.84 280,-113.84 280,-113.84 274,-113.84 268,-107.84 268,-101.84 268,-101.84 268,-86.92 268,-86.92 268,-80.92 274,-74.92 280,-74.92 280,-74.92 371.84,-74.92 371.84,-74.92 377.84,-74.92 383.84,-80.92 383.84,-86.92 383.84,-86.92 383.84,-101.84 383.84,-101.84 383.84,-107.84 377.84,-113.84 371.84,-113.84"}),e("image",{"xlink:href":l,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"320.42",y:"-107.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"320.36",y:"-84.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"a2")])])]),e("g",{id:"edge3",class:"edge"},[e("title",null,"n3->n0"),e("g",{id:"a_edge3"},[e("a",{"xlink:title":"support"},[e("path",{fill:"none",stroke:"#00ff00",d:"M384.28,-94.38C386.28,-94.38 388.28,-94.38 390.28,-94.38"}),e("polygon",{fill:"#00ff00",stroke:"#00ff00",points:"390.2,-97.88 400.2,-94.38 390.2,-90.88 390.2,-97.88"})])])]),e("g",{id:"node5",class:"node"},[e("title",null,"n4"),e("g",{id:"a_node5"},[e("a",{"xlink:title":"a4"},[e("path",{fill:"#c6cc9c",stroke:"black",d:"M371.84,-38.92C371.84,-38.92 280,-38.92 280,-38.92 274,-38.92 268,-32.92 268,-26.92 268,-26.92 268,-12 268,-12 268,-6 274,0 280,0 280,0 371.84,0 371.84,0 377.84,0 383.84,-6 383.84,-12 383.84,-12 383.84,-26.92 383.84,-26.92 383.84,-32.92 377.84,-38.92 371.84,-38.92"}),e("image",{"xlink:href":o,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"320.42",y:"-32.96"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"320.36",y:"-9.96","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"a4")])])]),e("g",{id:"edge4",class:"edge"},[e("title",null,"n4->n3"),e("g",{id:"a_edge4"},[e("a",{"xlink:title":"attack"},[e("path",{fill:"none",stroke:"#ff0000",d:"M325.92,-39.24C325.92,-46.55 325.92,-55.12 325.92,-63.26"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"322.42,-63.15 325.92,-73.15 329.42,-63.15 322.42,-63.15"})])])]),e("g",{id:"node6",class:"node"},[e("title",null,"n5"),e("g",{id:"a_node6"},[e("a",{"xlink:title":"a3"},[e("path",{fill:"#c6cc9c",stroke:"black",d:"M505.84,-38.92C505.84,-38.92 414,-38.92 414,-38.92 408,-38.92 402,-32.92 402,-26.92 402,-26.92 402,-12 402,-12 402,-6 408,0 414,0 414,0 505.84,0 505.84,0 511.84,0 517.84,-6 517.84,-12 517.84,-12 517.84,-26.92 517.84,-26.92 517.84,-32.92 511.84,-38.92 505.84,-38.92"}),e("image",{"xlink:href":l,width:"11px",height:"11px",preserveAspectRatio:"xMinYMin meet",x:"454.42",y:"-32.96"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"454.36",y:"-9.96","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"a3")])])]),e("g",{id:"edge5",class:"edge"},[e("title",null,"n5->n0"),e("g",{id:"a_edge5"},[e("a",{"xlink:title":"attack"},[e("path",{fill:"none",stroke:"#ff0000",d:"M459.92,-39.24C459.92,-46.55 459.92,-55.12 459.92,-63.26"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"456.42,-63.15 459.92,-73.15 463.42,-63.15 456.42,-63.15"})])])])])])])])],-1),e("p",null,'Click on "Source" to see how easy it is to add these icons.',-1),e("p",null,[t("This feature can be deactivated by setting "),e("code",null,"images/useTags"),t(" to false.")],-1),e("h2",{id:"using-metadata-to-add-images",tabindex:"-1"},[t("Using metadata to add images "),e("a",{class:"header-anchor",href:"#using-metadata-to-add-images","aria-label":'Permalink to "Using metadata to add images"'},"â")],-1),e("p",null,[t("You can also use metadata to add images to nodes. In this case you can "),e("strong",null,"omit the frontmatter metadata"),t(", as it will be created automatically from the metadata:")],-1),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"map"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 30model: 31 mode: strict 32===`),t(` 33Dogs are better than cats. `),e("span",{class:"hljs-meta"},'{images: ["/dog1.jpg", "/dog2.jpg"]}'),t(` 34`),e("span",{class:"hljs-attack"}," <-"),t(" Cats are better than dogs. "),e("span",{class:"hljs-meta"},'{images: ["/cat1.jpg", "/cat2.jpg"]}')])])]),e("div",{slot:"map"},[e("svg",{width:"204pt",height:"220pt",viewBox:"0.00 0.00 204.00 220.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 215.84)"},[e("title",null,"Argument Map"),e("g",{id:"node1",class:"node"},[e("title",null,"n0"),e("g",{id:"a_node1"},[e("a",{"xlink:title":"Dogs are better than cats. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-211.84C183.84,-211.84 12,-211.84 12,-211.84 6,-211.84 0,-205.84 0,-199.84 0,-199.84 0,-135.92 0,-135.92 0,-129.92 6,-123.92 12,-123.92 12,-123.92 183.84,-123.92 183.84,-123.92 189.84,-123.92 195.84,-129.92 195.84,-135.92 195.84,-135.92 195.84,-199.84 195.84,-199.84 195.84,-205.84 189.84,-211.84 183.84,-211.84"}),e("image",{"xlink:href":a,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-203.88"}),e("image",{"xlink:href":i,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-203.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"39",y:"-132.88","font-family":"arial","font-size":"10.00",fill:"#000000"},"Dogs are better than cats. ")])])]),e("g",{id:"node2",class:"node"},[e("title",null,"n1"),e("g",{id:"a_node2"},[e("a",{"xlink:title":"Cats are better than dogs. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-87.92C183.84,-87.92 12,-87.92 12,-87.92 6,-87.92 0,-81.92 0,-75.92 0,-75.92 0,-12 0,-12 0,-6 6,0 12,0 12,0 183.84,0 183.84,0 189.84,0 195.84,-6 195.84,-12 195.84,-12 195.84,-75.92 195.84,-75.92 195.84,-81.92 189.84,-87.92 183.84,-87.92"}),e("image",{"xlink:href":s,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-79.96"}),e("image",{"xlink:href":n,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-79.96"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"38.72",y:"-8.96","font-family":"arial","font-size":"10.00",fill:"#000000"},"Cats are better than dogs. ")])])]),e("g",{id:"edge1",class:"edge"},[e("title",null,"n1->n0"),e("g",{id:"a_edge1"},[e("a",{"xlink:title":"contrary"},[e("path",{fill:"none",stroke:"#ff0000",d:"M97.92,-99.56C97.92,-103.85 97.92,-108.19 97.92,-112.49"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"101.42,-99.8 97.92,-89.8 94.42,-99.8 101.42,-99.8"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"94.42,-112.18 97.92,-122.18 101.42,-112.18 94.42,-112.18"})])])])])])])])],-1),g("",4),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"map"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 35model: 36 mode: strict 37dot: 38 statement: 39 images: 40 position: bottom 41===`),t(` 42 43`),e("span",{class:"hljs-statement-title"},"[Dogs!]:"),t(" Dogs are better than cats. "),e("span",{class:"hljs-meta"},'{images: ["/dog1.jpg", "/dog2.jpg"]}'),t(` 44`),e("span",{class:"hljs-attack"}," <-"),t(),e("span",{class:"hljs-statement-title"},"[Cats!]:"),t(" Cats are better than dogs. "),e("span",{class:"hljs-meta"},'{images: ["/cat1.jpg", "/cat2.jpg"]}')])])]),e("div",{slot:"map"},[e("svg",{width:"204pt",height:"252pt",viewBox:"0.00 0.00 204.00 252.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 247.84)"},[e("title",null,"Argument Map"),e("g",{id:"node1",class:"node"},[e("title",null,"n0"),e("g",{id:"a_node1"},[e("a",{"xlink:title":"Dogs are better than cats. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-243.84C183.84,-243.84 12,-243.84 12,-243.84 6,-243.84 0,-237.84 0,-231.84 0,-231.84 0,-151.92 0,-151.92 0,-145.92 6,-139.92 12,-139.92 12,-139.92 183.84,-139.92 183.84,-139.92 189.84,-139.92 195.84,-145.92 195.84,-151.92 195.84,-151.92 195.84,-231.84 195.84,-231.84 195.84,-237.84 189.84,-243.84 183.84,-243.84"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"83.75",y:"-229.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Dogs!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"39",y:"-212.88","font-family":"arial","font-size":"10.00",fill:"#000000"},"Dogs are better than cats. "),e("image",{"xlink:href":a,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-203.88"}),e("image",{"xlink:href":i,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-203.88"})])])]),e("g",{id:"node2",class:"node"},[e("title",null,"n1"),e("g",{id:"a_node2"},[e("a",{"xlink:title":"Cats are better than dogs. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-103.92C183.84,-103.92 12,-103.92 12,-103.92 6,-103.92 0,-97.92 0,-91.92 0,-91.92 0,-12 0,-12 0,-6 6,0 12,0 12,0 183.84,0 183.84,0 189.84,0 195.84,-6 195.84,-12 195.84,-12 195.84,-91.92 195.84,-91.92 195.84,-97.92 189.84,-103.92 183.84,-103.92"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"85.42",y:"-89.96","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Cats!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"38.72",y:"-72.96","font-family":"arial","font-size":"10.00",fill:"#000000"},"Cats are better than dogs. "),e("image",{"xlink:href":s,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-63.96"}),e("image",{"xlink:href":n,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-63.96"})])])]),e("g",{id:"edge1",class:"edge"},[e("title",null,"n1->n0"),e("g",{id:"a_edge1"},[e("a",{"xlink:title":"contrary"},[e("path",{fill:"none",stroke:"#ff0000",d:"M97.92,-115.8C97.92,-119.89 97.92,-124 97.92,-128.09"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"101.42,-115.83 97.92,-105.83 94.42,-115.83 101.42,-115.83"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"94.42,-127.97 97.92,-137.97 101.42,-127.97 94.42,-127.97"})])])])])])])])],-1),e("h2",{id:"adding-padding",tabindex:"-1"},[t("Adding padding "),e("a",{class:"header-anchor",href:"#adding-padding","aria-label":'Permalink to "Adding padding"'},"â")],-1),e("p",null,[t("You can add padding around the images by using the "),e("code",null,"dot/statement/images/padding"),t(" and "),e("code",null,"dot/argument/images/padding"),t(" setting:")],-1),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"map"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 45model: 46 mode: strict 47dot: 48 statement: 49 images: 50 padding: 20 51===`),t(` 52 53`),e("span",{class:"hljs-statement-title"},"[Dogs!]:"),t(" Dogs are better than cats. "),e("span",{class:"hljs-meta"},'{images: ["/dog1.jpg", "/dog2.jpg"]}'),t(` 54`),e("span",{class:"hljs-attack"}," <-"),t(),e("span",{class:"hljs-statement-title"},"[Cats!]:"),t(" Cats are better than dogs. "),e("span",{class:"hljs-meta"},'{images: ["/cat1.jpg", "/cat2.jpg"]}')])])]),e("div",{slot:"map"},[e("svg",{width:"208pt",height:"332pt",viewBox:"0.00 0.00 208.00 332.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 327.84)"},[e("title",null,"Argument Map"),e("g",{id:"node1",class:"node"},[e("title",null,"n0"),e("g",{id:"a_node1"},[e("a",{"xlink:title":"Dogs are better than cats. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M187.84,-323.84C187.84,-323.84 12,-323.84 12,-323.84 6,-323.84 0,-317.84 0,-311.84 0,-311.84 0,-191.92 0,-191.92 0,-185.92 6,-179.92 12,-179.92 12,-179.92 187.84,-179.92 187.84,-179.92 193.84,-179.92 199.84,-185.92 199.84,-191.92 199.84,-191.92 199.84,-311.84 199.84,-311.84 199.84,-317.84 193.84,-323.84 187.84,-323.84"}),e("image",{"xlink:href":a,width:"56px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"31.92",y:"-295.88"}),e("image",{"xlink:href":i,width:"56px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"111.92",y:"-295.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"85.75",y:"-205.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Dogs!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"41",y:"-188.88","font-family":"arial","font-size":"10.00",fill:"#000000"},"Dogs are better than cats. ")])])]),e("g",{id:"node2",class:"node"},[e("title",null,"n1"),e("g",{id:"a_node2"},[e("a",{"xlink:title":"Cats are better than dogs. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M187.84,-143.92C187.84,-143.92 12,-143.92 12,-143.92 6,-143.92 0,-137.92 0,-131.92 0,-131.92 0,-12 0,-12 0,-6 6,0 12,0 12,0 187.84,0 187.84,0 193.84,0 199.84,-6 199.84,-12 199.84,-12 199.84,-131.92 199.84,-131.92 199.84,-137.92 193.84,-143.92 187.84,-143.92"}),e("image",{"xlink:href":s,width:"56px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"31.92",y:"-115.96"}),e("image",{"xlink:href":n,width:"56px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"111.92",y:"-115.96"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"87.42",y:"-25.96","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Cats!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"40.72",y:"-8.96","font-family":"arial","font-size":"10.00",fill:"#000000"},"Cats are better than dogs. ")])])]),e("g",{id:"edge1",class:"edge"},[e("title",null,"n1->n0"),e("g",{id:"a_edge1"},[e("a",{"xlink:title":"contrary"},[e("path",{fill:"none",stroke:"#ff0000",d:"M99.92,-155.55C99.92,-159.81 99.92,-164.08 99.92,-168.33"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"103.42,-155.82 99.92,-145.82 96.42,-155.82 103.42,-155.82"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"96.42,-168.01 99.92,-178.01 103.42,-168.01 96.42,-168.01"})])])])])])])])],-1),e("h2",{id:"using-inline-images-for-better-portability",tabindex
54:"-1"},[t('Using "inline" images for better portability '),e("a",{class:"header-anchor",href:"#using-inline-images-for-better-portability","aria-label":'Permalink to "Using "inline" images for better portability"'},"â")],-1),e("p",null,'If you do not want to depend on external image files, you can "inline" the images using data urls. This is recommended if you export your map to pdf or want to send someone your svg file. The downside of this method is that each instance of your image will increase the file size.',-1),e("figure",{role:"group",class:"argdown-figure"},[e("argdown-map",{initialView:"source"},[e("div",{slot:"source",class:""},[e("pre",{class:"language-argdown"},[e("code",{class:"language-argdown"},[e("span",{class:"hljs-meta"},`=== 55model: 56 mode: strict 57images: 58 convertToDataUrls: true 59===`),t(` 60 61`),e("span",{class:"hljs-statement-title"},"[Dogs!]:"),t(" Dogs are better than cats. "),e("span",{class:"hljs-meta"},'{images: ["/dog1.jpg", "/dog2.jpg"]}'),t(` 62`),e("span",{class:"hljs-attack"}," <-"),t(),e("span",{class:"hljs-statement-title"},"[Cats!]:"),t(" Cats are better than dogs. "),e("span",{class:"hljs-meta"},'{images: ["/cat1.jpg", "/cat2.jpg"]}')])])]),e("div",{slot:"map"},[e("svg",{width:"204pt",height:"252pt",viewBox:"0.00 0.00 204.00 252.00",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[e("g",{id:"graph0",class:"graph",transform:"scale(1 1) rotate(0) translate(4 247.84)"},[e("title",null,"Argument Map"),e("g",{id:"node1",class:"node"},[e("title",null,"n0"),e("g",{id:"a_node1"},[e("a",{"xlink:title":"Dogs are better than cats. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-243.84C183.84,-243.84 12,-243.84 12,-243.84 6,-243.84 0,-237.84 0,-231.84 0,-231.84 0,-151.92 0,-151.92 0,-145.92 6,-139.92 12,-139.92 12,-139.92 183.84,-139.92 183.84,-139.92 189.84,-139.92 195.84,-145.92 195.84,-151.92 195.84,-151.92 195.84,-231.84 195.84,-231.84 195.84,-237.84 189.84,-243.84 183.84,-243.84"}),e("image",{"xlink:href":a,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-235.88"}),e("image",{"xlink:href":i,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-235.88"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"83.75",y:"-165.88","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Dogs!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"39",y:"-148.88","font-family":"arial","font-size":"10.00",fill:"#000000"},"Dogs are better than cats. ")])])]),e("g",{id:"node2",class:"node"},[e("title",null,"n1"),e("g",{id:"a_node2"},[e("a",{"xlink:title":"Cats are better than dogs. "},[e("path",{fill:"white",stroke:"#1b9e77","stroke-width":"2",d:"M183.84,-103.92C183.84,-103.92 12,-103.92 12,-103.92 6,-103.92 0,-97.92 0,-91.92 0,-91.92 0,-12 0,-12 0,-6 6,0 12,0 12,0 183.84,0 183.84,0 189.84,0 195.84,-6 195.84,-12 195.84,-12 195.84,-91.92 195.84,-91.92 195.84,-97.92 189.84,-103.92 183.84,-103.92"}),e("image",{"xlink:href":s,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"16.42",y:"-95.96"}),e("image",{"xlink:href":n,width:"75px",height:"56px",preserveAspectRatio:"xMinYMin meet",x:"104.42",y:"-95.96"}),e("text",{"xml:space":"preserve","text-anchor":"start",x:"85.42",y:"-25.96","font-family":"arial","font-weight":"bold","font-size":"10.00",fill:"#000000"},"Cats!"),e("text",{"xml:space":"preserve","text-anchor":"start",x:"38.72",y:"-8.96","font-family":"arial","font-size":"10.00",fill:"#000000"},"Cats are better than dogs. ")])])]),e("g",{id:"edge1",class:"edge"},[e("title",null,"n1->n0"),e("g",{id:"a_edge1"},[e("a",{"xlink:title":"contrary"},[e("path",{fill:"none",stroke:"#ff0000",d:"M97.92,-115.8C97.92,-119.89 97.92,-124 97.92,-128.09"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"101.42,-115.83 97.92,-105.83 94.42,-115.83 101.42,-115.83"}),e("polygon",{fill:"#ff0000",stroke:"#ff0000",points:"94.42,-127.97 97.92,-137.97 101.42,-127.97 94.42,-127.97"})])])])])])])])],-1),e("div",{class:"warning custom-block"},[e("p",{class:"custom-block-title"},"WARNING"),e("p",null,[t("Note that this feature is only supported by Argdown tools that have access to the filesystem. These are the same tools that support automatic image size detection, so you can check the list of those tools "),e("a",{href:"/guide/adding-images.html#adding-images"},"at the beginning of this guide"),t(".")]),e("p",null,[t("This documentation is built using "),e("code",null,"@argdown/markdown-it-plugin"),t(", which does not support this feature, so the images in this example were "),e("em",null,"not"),t(" transformed into inline pictures.")])],-1)])])}const M=d(c,[["render",m]]);export{b as __pageData,M as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.