29:null 2a:["$","title",null,{"children":"Attack Flow: Navigator Viz | MITRE Center for Threat-Informed Defense | Observable"}] 2f:T54c,## Introduction On this page, you can visualize an Attack Flow drawn on top of an ATT&CK Navigator matrix. First, upload an Attack Flow in STIX format (`.json`), which you can get by going to "File → Export STIX File" in Attack Flow Builder. Then, choose a Navigator base layer or supply your own. Finally, preview and download the resulting visualization. ### Create Your Own Navigator Layer If you want, you can create your own navigator layer to upload into this visualization. Go to the [ATT&CK Navigator](https://mitre-attack.github.io/attack-navigator/) site and choose `Create New Layer` from the list of options. Then, chose the ATT&CK domain you want to start with. Navigator will open up a blank matrix for you to work with. Click the `Help` icon for instructions or [read the documentation](https://github.com/mitre-attack/attack-navigator/blob/master/USAGE.md) for more information. Once you're satisfied with your Navigator layer, you'll need to export it to SVG. Click on the Layer Controls tab on the top right corner of the toolbar. Select the `Export` option which looks like a downwards arrow. From that dropdown menu, click the camera icon to download to SVG. A modal will pop up that gives you a few options on the SVG style. Click the `download` button which looks like a downward arrow in the top far right corner of the modal.30:T6fe,addOverlay = { let svgSrc = null; let outputContent = ''; let svgData = ''; if ((!layerSrc && !uploadedBase) || !data ) { outputContent= null; } else if (layerSrc) { const svg = await loadImage(layerSrc); svgSrc = render(svg, data); outputContent = svgSrc; } else { const svg = await uploadedBase.text(); svgSrc = render(svg, data); outputContent = svgSrc; } // Export buttons const downloadButton = html``; downloadButton.onclick = () => { const blob = new Blob([outputContent], {type: "image/svg+xml"}) const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "attack-flow-matrix.svg"; a.click(); URL.revokeObjectURL(url); }; const fullScreenButton = html`` fullScreenButton.onclick = () => { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.querySelector("#preview").requestFullscreen(); } } if (outputContent) { return html`

${downloadButton} ${fullScreenButton}

${outputContent}

`; } else { return html` Please select an Attack Flow file and a base layer to get started… ` } } 31:T424,groupedTechniques = { if (!data) { return null }; const actions = data.objects.filter(item => item.type === "attack-action"); const grouped = {}; actions.forEach(action => { if (!action["technique_id"]) { return; } let tacticId = action["tactic_id"] || "(NA)"; const tactic = tactics[tacticId] || { id: tacticId, name: "(Tactic Not Provided)", order: 99, domain: null, } if (!grouped[tacticId]) { grouped[tacticId] = { tactic, techniques: new Array(), } } grouped[tacticId].techniques.push({ id: action.technique_id, name: action.name, description: action.description, }); }); const tacticGroups = new Array(); for (let i = 0; i < Object.entries(grouped).length; i++) { const [tacticId, data] = Object.entries(grouped)[i]; tacticGroups.push({ tactic: data.tactic, techniques: data.techniques, }); } tacticGroups.sort((a,b) => a.tactic.order - b.tactic.order); return tacticGroups; } 32:T4ed,TACTIC_LOOKUP = ({ // Enterprise TA0043: "reconnaissance", TA0042: "resource-development", TA0001: "initial-access", TA0002: "execution", TA0003: "persistence", TA0004: "privilege-sscalation", TA0005: "defense-evasion", TA0006: "credential-access", TA0007: "discovery", TA0008: "lateral-movement", TA0009: "collection", TA0011: "command-and-control", TA0010: "exfiltration", TA0040: "impact", // Mobile: TA0027: "initial-access", TA0041: "execution", TA0028: "persistence", TA0029: "privilege-escalation", TA0030: "defense-evasion", TA0031: "credential-access", TA0032: "discovery", TA0033: "lateral-movement", TA0035: "collection", TA0037: "command-and-control", TA0036: "exfiltration", TA0034: "impact", TA0038: "network-effects", TA0039: "remote-service-effects", // ICS: TA0108: "initial-access", TA0104: "execution", TA0110: "persistence", TA0111: "privilege-sscalation", TA0103: "evasion", TA0102: "discovery", TA0109: "lateral-movement", TA0100: "collection", TA0101: "command-and-control", TA0107: "inhibit-response-function", TA0106: "impair-process-control", TA0105: "impact", })33:T1111,/** * Draw an arrow from one technique to another. * @param {*} sourceTid * @param {*} targetTid * @param {*} sourceGeometry * @param {*} targetGeometry * @param {*} showControlPoints */ function _createRelationshipOverlay(sourceTid, targetTid, sourceGeometry, targetGeometry, showControlPoints) { // Create a container element for the arrow. const overlay = document.createElementNS("http://www.w3.org/2000/svg", "g"); overlay.classList.add("overlay", `${sourceTid}-${targetTid}`); const translateX = sourceGeometry.x + sourceGeometry.width / 2; const translateY = sourceGeometry.y + sourceGeometry.height / 2; overlay.setAttribute("transform", `translate(${translateX}, ${translateY})`); // Compute the coordinates for the path. const startRX = sourceGeometry.width * ELLIPSE_SIZE_MULTIPLIER; const startRY = sourceGeometry.height * ELLIPSE_SIZE_MULTIPLIER; let startX = ARROW_OFFSET; let startY = Math.sqrt(startRY ** 2 * (1 - startX ** 2 / startRX ** 2)); const targetRX = targetGeometry.width * ELLIPSE_SIZE_MULTIPLIER; const targetRY = targetGeometry.height * ELLIPSE_SIZE_MULTIPLIER; const targetDX = ARROW_OFFSET; const targetDY = Math.sqrt(targetRY ** 2 * (1 - targetDX ** 2 / targetRX ** 2)); let targetX = targetGeometry.x - sourceGeometry.x; let targetY = targetGeometry.y - sourceGeometry.y; // Make room for the arrow head. The slope is the same as control_dy / control_dx so that the arrow points // in the same direction as the line end. let distance = Math.sqrt((targetX - startX) ** 2 + (targetY - startY) ** 2); const controlDX = distance * 0.1; const controlDY = distance * 0.2; let arrowDX = Math.sqrt((ARROWHEAD_WIDTH * 2) ** 2 / 5) let arrowDY = arrowDX * 2 let control1X, control1Y, control2X, control2Y; if (targetGeometry.x < sourceGeometry.x) { startX = -startX targetX += targetDX + arrowDX control1X = startX - controlDX control2X = targetX + controlDX } else { targetX -= targetDX + arrowDX control1X = startX + controlDX control2X = targetX - controlDX } if (targetGeometry.y < sourceGeometry.y) { startY = -startY targetY += targetDY + arrowDY control1Y = startY - controlDY control2Y = targetY + controlDY } else { targetY -= targetDY + arrowDY control1Y = startY + controlDY control2Y = targetY - controlDY } // Show control points, if requested for debugging. if (showControlPoints) { const startPoint = document.createElementNS("http://www.w3.org/2000/svg", "circle"); startPoint.setAttribute("cx", startX); startPoint.setAttribute("cy", startY); startPoint.setAttribute("r", 2); startPoint.style.fill = "green"; overlay.appendChild(startPoint); const targetPoint = document.createElementNS("http://www.w3.org/2000/svg", "circle"); targetPoint.setAttribute("cx", targetX); targetPoint.setAttribute("cy", targetY); targetPoint.setAttribute("r", 2); targetPoint.style.fill = "blue"; overlay.appendChild(targetPoint); const controlPoint1 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); controlPoint1.setAttribute("cx", control1X); controlPoint1.setAttribute("cy", control1Y); controlPoint1.setAttribute("r", 2); controlPoint1.style.fill = "red"; overlay.appendChild(controlPoint1); const controlPoint2 = document.createElementNS("http://www.w3.org/2000/svg", "circle"); controlPoint2.setAttribute("cx", control2X); controlPoint2.setAttribute("cy", control2Y); controlPoint2.setAttribute("r", 2); controlPoint2.style.fill = "orange"; overlay.appendChild(controlPoint2); } // Create the path. const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", `M ${startX} ${startY} C ${control1X} ${control1Y} ${control2X} ${control2Y} ${targetX} ${targetY}`); path.setAttribute("marker-end", "url(#attack-flow-arrowhead)"); path.setAttribute("stroke", OVERLAY_COLOR); path.setAttribute("stroke-width", STROKE_WIDTH); path.setAttribute("fill", "none"); overlay.append(path) return overlay; }34:T404,/** * Create an ellipse object that goes around the specified technique. * @param {*} techniqueId * @param {*} techniqueGeometry * @returns */ function _createTechniqueOverlay(techniqueId, techniqueGeometry, color) { const { x, y, width, height } = techniqueGeometry; const overlay = document.createElementNS("http://www.w3.org/2000/svg", "g"); overlay.classList.add("overlay", techniqueId); overlay.setAttribute("transform", `translate(${x}, ${y})`); const ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse"); ellipse.setAttribute("rx", (width * ELLIPSE_SIZE_MULTIPLIER).toString()); ellipse.setAttribute("ry", (height * ELLIPSE_SIZE_MULTIPLIER).toString()); ellipse.setAttribute("cx", (width / 2).toString()); ellipse.setAttribute("cy", (height / 2).toString()); ellipse.setAttribute("fill", "none"); ellipse.setAttribute("stroke", color); ellipse.setAttribute("stroke-width", STROKE_WIDTH); overlay.appendChild(ellipse); return overlay; }35:T80c,/** * Look up the geometry for a given node (i.e. where it is located in the graphic). If the node contains a * tactic ID, then we attempt to look up the node within that tactic column, otherwise we return an arbitrary * geometry matching that node's technique ID. * @param {*} node * @param {*} techniqueGeometries */ function _lookupGeometry(node, techniqueGeometries) { const techniqueId = node["technique_id"]; const tacticId = node["tactic_id"]; const tactic = TACTIC_LOOKUP[tacticId]; let geometry; // Try looking up by tactic + technique ID first. if (tactic) { geometry = techniqueGeometries[`${tactic}-${techniqueId}`]; } // Fall back to looking up by technique ID alone. if (!geometry) { geometry = techniqueGeometries[techniqueId]; } // Finally, check if its a subtechnique and its parent technique can be looked up. if (!geometry) { if (techniqueId.includes(".")) { // If the TID is not found and it's a subtechnique, then check if the parent TID exists. const parentTid = techniqueId.split(".")[0]; // Look up by tactic + technique ID first. if (tactic) { geometry = techniqueGeometries[`${tactic}-${parentTid}`]; } // Fall back to looking up by technique ID alone. if (!geometry) { geometry = techniqueGeometries[parentTid]; } if (geometry) { console.warn(`Did not find subtechnique "${techniqueId}" in the SVG; substituting its parent technique "${parentTid}".`) // Hack: update the technique ID so we can draw the arrows pointing at it later. node["technique_id"] = parentTid; } else { console.error(`Did not find subtechnique "${techniqueId}" or its parent technique "${parentTid}" in the SVG.`); } } else { console.error(`Did not find TID=${techniqueId} in the SVG.`); } } return geometry; }36:Tc54,/** * Iterate over an XML tree and create objects that represent the geometry for each element for a * technique. * * SVG doesn't have any concept of depth or z-index. It draws all items in document order. So in order to draw * an overlay, the overlay must come after all elements that it intersects. The straightforward way to do this * is to append the element to the end of the document, but then it won't be translated properly since it's no * longer nested inside the same as the target element. So this method traverses the tree and keeps track * of the sum of translations for each element, then writes a new technique back to techniqueGeometries * with the technique ID as key and its translation as values. * @param {*} techniqueGeometries - this object is edited in place! * @param {*} node * @param {*} parentX * @param {*} parentY */ function _enumerateTechniqueGeometries(techniqueGeometries, node, parentX = 0, parentY = 0, tactic = null) { for (let i = 0; i < node.children.length; i++) { const child = node.children[i] let childX = parentX; let childY = parentY; let tempTactic = tactic; let transform = child.getAttribute("transform") if (transform) { let match = transform.match(TRANSLATE_RE) if (match) { childX += parseFloat(match[1]); childY += parseFloat(match[2]); } else { console.log(`Unknown SVG transform: "${transform}" (was this SVG created by ATT&CK Navigator?)`); } } const childClass = child.getAttribute("class"); // let match = childClass ? childClass.match(TACTIC_CLASS_RE) : null if (childClass && childClass.match(TACTIC_CLASS_RE)) { let match = childClass.match(TACTIC_CLASS_RE) // If we traverse a tactic node (which is a ) then pass the tactic name down to the recursive // calls. tempTactic = match[1]; } else if (childClass && childClass.match(TECHNIQUE_CLASS_RE)) { let match = childClass.match(TECHNIQUE_CLASS_RE); const techniqueId = match[2]; try { const rect = child.querySelector("rect"); const width = parseFloat(rect.getAttribute("width")); const height = parseFloat(rect.getAttribute("height")); // Store geometries twice: once under TechniqueID and once more under a compound key // Tactic-TechniqueID. The renderer will use Tactic if available and fall back to just // TechniqueID. const geom = { x: childX, y: childY, width, height }; techniqueGeometries[techniqueId] = geom; if (tempTactic) { techniqueGeometries[`${tempTactic}-${techniqueId}`] = geom; } } catch (e) { console.log(`Could not find a with width and height attributes for technique ${techniqueId}`); } } _enumerateTechniqueGeometries(techniqueGeometries, child, childX, childY, tempTactic); } }37:T730,/** * Given an Attack Flow graph, return the induced graph containing only attack-action nodes. * * Note that we further eliminate attack-action nodes that do no contain a technique ID. * * @param {*} nodes * @param {*} edges * @returns [nodes, edges] */ function _induceActionGraph(nodes, edges) { const actionNodes = {}; const actionEdges = {}; const stack = []; const includeNode = (node) => node.type === "attack-action" && node["technique_id"] !== undefined; // Initialize the graph using the nodes and edges of just the attack-action objects. for (let i=0; inode. * Edges is a map where each key is a parent node ID and each value is a set of * child node IDs. * * @param {*} bundleSrc * @returns [nodes, edges] */ function _convertBundleToGraph(bundleSrc) { const bundle = bundleSrc; const nodes = {}; const edges = {}; // Create a node for each object. for (let i=0; i < bundle.objects.length; i++) { const node = bundle.objects[i] if (node.type !== "relationship") { nodes[node.id] = node; edges[node.id] = new Set(); } } // Add children from each node's [resolvable] direct refs. for (let i=0; i < Object.values(nodes).length; i++) { const node = Object.values(nodes)[i]; for (let j=0; j < Object.entries(node).length; j++) { const [property, value] = Object.entries(node)[j]; if (property.substring(property.length - 4) == "_ref") { if (value in nodes) { edges[node.id].add(value); } } else if (property.substring(property.length - 5) == "_refs") { for (let k=0; k translation coordinates for that technique's element. const techniqueGeometries = {}; _enumerateTechniqueGeometries(techniqueGeometries, svgDoc) // Create a new to hold all of the Attack Flow overlay elements. const attackFlowOverlay = document.createElementNS("http://www.w3.org/2000/svg", "g"); attackFlowOverlay.setAttribute("class", "attack-flow-overlay"); attackFlowOverlay.appendChild(_getArrowheadMarker()); svgDoc.children[0].appendChild(attackFlowOverlay); // Load the Attack Flow STIX bundle and convert it to an action graph. const [nodes, edges] = _convertBundleToGraph(flowStix); const [actionNodes, actionEdges] = _induceActionGraph(nodes, edges); const attackFlowNode = Object.values(nodes).find((n) => n.type === "attack-flow") // Draw ellipses around the (sub-)techniques. for (let i = 0; i < Object.values(actionNodes).length; i++) { const actionNode = Object.values(actionNodes)[i]; let color = OVERLAY_COLOR; if (attackFlowNode.start_refs.find((i) => i === actionNode.id)) { // it is (one of the) first node(s) if it is listed in the attack flow's start refs array color = START_COLOR; } else if (!actionNode.effect_refs || actionNode.effect_refs.length < 1) { // it is (one of the) last node(s) if it has no effect references color = END_COLOR; } const tid = actionNode["technique_id"]; const translation = _lookupGeometry(actionNode, techniqueGeometries); if (translation) { const techniqueOverlay = _createTechniqueOverlay(tid, translation, color); attackFlowOverlay.appendChild(techniqueOverlay); } } // Draw arrows from each technique to its children. for (let i=0; i< Object.entries(actionEdges).length; i++) { const [sourceId, children] = Object.entries(actionEdges)[i]; const sourceNode = actionNodes[sourceId]; const sourceTid = sourceNode["technique_id"]; const sourceGeometry = _lookupGeometry(sourceNode, techniqueGeometries); for (let j=0; j < children.size; j++) { const child = Array.from(children)[j]; const targetNode = actionNodes[child]; const targetTid = targetNode["technique_id"]; const targetGeometry = _lookupGeometry(targetNode, techniqueGeometries); if (!(sourceGeometry && targetGeometry)) { // This could happen if a specified technique does not exist in this matrix, e.g. using mobile // techniques on an enterprise matrix. continue; } const arrowOverlay = _createRelationshipOverlay( sourceTid, targetTid, sourceGeometry, targetGeometry, SHOW_CONTROL_POINTS); attackFlowOverlay.appendChild(arrowOverlay); } } return svgDoc.documentElement.outerHTML; }3a:[{"id":"8e7a597de0395683116c69bd553894e9567b5e92bb297ffab0a333078ad4d4d2d1a0d33453aac953038dd76f8aee9e4cd1290cacae6d25a346f9103b5cc1a378","href":"https://static.observableusercontent.com/files/8e7a597de0395683116c69bd553894e9567b5e92bb297ffab0a333078ad4d4d2d1a0d33453aac953038dd76f8aee9e4cd1290cacae6d25a346f9103b5cc1a378","name":"azure_overview.svg","type":"image/svg+xml","lastModified":1746634283509.896,"size":107732},{"id":"2552246c4e0e1982157aef1af9a13ac76687bc4bcb294514408d94e5eb9e2b4b2d3f77ab35dc66cb4003ff2d1e0bf42cdb4a411ddb3e2d6a166df6d5fcb3545f","href":"https://static.observableusercontent.com/files/2552246c4e0e1982157aef1af9a13ac76687bc4bcb294514408d94e5eb9e2b4b2d3f77ab35dc66cb4003ff2d1e0bf42cdb4a411ddb3e2d6a166df6d5fcb3545f","name":"m365_overview.svg","type":"image/svg+xml","lastModified":1746634283509.896,"size":119665},{"id":"51ead516ab5c8d230ae0af3a0bbac4173998bbe5dba0a7e7008be03b12217cead658202f6908895633fa14014e37bc889dc5edb734c94caf60d7cdfcb2654192","href":"https://static.observableusercontent.com/files/51ead516ab5c8d230ae0af3a0bbac4173998bbe5dba0a7e7008be03b12217cead658202f6908895633fa14014e37bc889dc5edb734c94caf60d7cdfcb2654192","name":"nist_800_53_overview.svg","type":"image/svg+xml","lastModified":1746634283509.896,"size":119914},{"id":"e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","href":"https://static.observableusercontent.com/files/e837ab279c80d5a039cc683545f7066713f992f1e40086cb97e8890cd5fe75b2b59f3d6f3e5c65260e96562c6c4236c697d6fb142af356330d916faa6d3d0e7d","name":"tactics@1.json","type":"application/json","lastModified":1746634283509.896,"size":2941}] 2d:{"id":"0f89cf4ba5a52ce5","slug":null,"title":"Attack Flow: Navigator Viz","thumbnail":"3a0de862ba6d3f24c6ed046afd38f16d58f283fd7b193d895c6c13f63550f416","access_level":"public","create_time":"$D2025-05-07T16:11:23.509Z","update_time":"$D2025-07-22T17:27:22.024Z","view_time":null,"first_public_time":"$D2025-07-03T15:04:38.958Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"f0049cade5d2fe99","login":"center-for-threat-informed-defense","name":"MITRE Center for Threat-Informed Defense","avatar_url":"https://avatars-next.observableusercontent.com/3b469a4cc1bde42906cdf9cb8b1febfc36ddbfd46ac8a67b6d52081ac91c8e21","tier":"starter_2024"},"version":1259,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c59e216253a2d162","login":"mehaase","name":"Mark E. Haase","avatar_url":"https://avatars-next.observableusercontent.com/8d4400329a9badef98ce12aebc71bb070afbfa4a6a54ddad5190fb0399a0d633","tier":null}],"members":[{"type":"team","id":"f0049cade5d2fe99","login":"center-for-threat-informed-defense","name":"MITRE Center for Threat-Informed Defense","avatar_url":"https://avatars-next.observableusercontent.com/3b469a4cc1bde42906cdf9cb8b1febfc36ddbfd46ac8a67b6d52081ac91c8e21","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c59e216253a2d162","login":"mehaase","name":"Mark E. Haase","avatar_url":"https://avatars-next.observableusercontent.com/8d4400329a9badef98ce12aebc71bb070afbfa4a6a54ddad5190fb0399a0d633","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Attack Flow: Navigator Viz","cells":[{"id":0,"value":"# Attack Flow: Navigator Viz\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":298,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"viewof uploadedFile = Inputs.file({\n label: \"Select an Attack Flow (.json)\",\n accept: \".json\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"viewof baseLayer = Inputs.select(new Map([\n [\"\", \"\"],\n [\"Enterprise Techniques\", \"enterprise-blank\"],\n [\"Enterprise Techniques and Subtechniques\", \"enterprise-subs-blank\"],\n [\"Mobile Techniques\", \"mobile-blank\"],\n [\"Mobile Techniques and Subtechnique\", \"mobile-subs-blank\"],\n [\"ICS Techniques\", \"ics-blank\"],\n [\"Mappings Explorer: NIST 800-53 Rev 5\", FileAttachment('nist_800_53_overview.svg')],\n [\"Mappings Explorer: Azure\", FileAttachment('azure_overview.svg')],\n [\"Mappings Explorer: M365\", FileAttachment('m365_overview.svg')],\n]), {value: \"\", label: \"Select base layer:\"})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"viewof uploadedBase = Inputs.file({\n label: \"Or, upload your own base layer (.svg)\",\n accept: \".svg\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"viewof START_COLOR = Inputs.color({label: \"Start Node\", value: \"#D94040\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1139,"value":"viewof OVERLAY_COLOR = Inputs.color({label: \"Middle Nodes\", value: \"#D94040\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"viewof END_COLOR = Inputs.color({label: \"End Node\", value: \"#D94040\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"--- \n\n## Code 👩‍🔬\n\nEverything from here down is the support code used to run this page. If you are a developer, you may find this interesting, but for most audiences you can simply ignore it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"data = uploadedFile ? uploadedFile.json() : null;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"layerSrc = {\n if(!baseLayer) {\n return null;\n } else {\n return `https://center-for-threat-informed-defense.github.io/attack-flow/matrix/${baseLayer}.svg`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"loadImage = async function (url) {\n if (baseLayer && typeof baseLayer === 'object') {\n // handle picking one of the options that is locally hosted in this notebook\n return baseLayer.text();\n }\n // handle picking one of the options that is hosted on the documentation site\n return fetch(url).then((response) => response.text())\n .then((svgData) => {\n return svgData\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"tactics = FileAttachment(\"tactics@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"function getTechniqueUrl(techniqueId) {\n return `https://attack.mitre.org/techniques/${techniqueId.replace('.', '/')}/`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"TACTIC_CLASS_RE = /tactic ([-a-z]+)/;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"ARROWHEAD_WIDTH = 7;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"LINE_BENDINESS = 0.15;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"ARROWHEAD_HEIGHT = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"ARROW_OFFSET = 30;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":" STROKE_WIDTH = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"/**\n * Create an arrowhead element that can be re-used for each path\n * @returns\n */\nfunction _getArrowheadMarker() {\n\n const marker = document.createElementNS(\"http://www.w3.org/2000/svg\", \"marker\");\n marker.setAttribute(\"id\", \"attack-flow-arrowhead\");\n marker.setAttribute(\"markerWidth\", ARROWHEAD_WIDTH);\n marker.setAttribute(\"markerHeight\", ARROWHEAD_HEIGHT);\n marker.setAttribute(\"refX\", \"0\");\n marker.setAttribute(\"refY\", ARROWHEAD_HEIGHT / 2);\n marker.setAttribute(\"orient\", \"auto\");\n\n const poly = document.createElementNS(\"http://www.w3.org/2000/svg\", \"polygon\");\n const halfHeight = ARROWHEAD_HEIGHT / 2;\n poly.setAttribute(\"points\", `0 0, ${ARROWHEAD_WIDTH} ${halfHeight}, 0 ${ARROWHEAD_HEIGHT}`);\n poly.style.fill = OVERLAY_COLOR;\n marker.appendChild(poly);\n\n return marker\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"TECHNIQUE_CLASS_RE = /(sub)?technique (T[.0-9]+)/;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"TRANSLATE_RE = /^translate\$([^,]+),\\s*([^,]+)\$$/;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"ELLIPSE_SIZE_MULTIPLIER = 0.6;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"SHOW_CONTROL_POINTS = false; // for debugging, set to true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2e:"$2d:body"