Excalidraw Clothesline Workflow

[zsviczian]

This is the accompanying templater script to the detailed walkthrough video introducing the Clothesline Method and creating a templater script to help automate the workflow.

Here's the Obsidian Excalidraw template for use with the script: Empty Clothesline.md

The script

<%*
const ea = ExcalidrawAutomate;
ea.reset();
ea.style.fontSize = 10;
ea.style.textAlign = "center";
ea.setFontFamily(1);

const colors = ["40c057","7950f2","228be6","fa5252","fab005","868e96"]
const clipcolor = colors[Math.floor(Math.random()*colors.length)];

const editor = app.workspace.activeLeaf.view.editor;
const curLineNum = editor.getCursor().line;
const curLine = editor.getLine(curLineNum);
const card_title = curLine.match(/#+\s+(.*)/)[1];
const card_title_wrapped = ea.wrapText(card_title,14);

const id = ea.addText(0,0,card_title_wrapped);
const element = ea.elementsDict[id];
const file_name = tp.file.title;
const width = element.width;
const height = element.height;
const baseline = element.baseline;
const textX = 66 + (77 - width)/2;

const result = `{"type":"excalidraw/clipboard","elements":[{"type":"rectangle","version":723,"versionNonce":1762973337,"isDeleted":false,"id":"lmvcX0zhlX5vFT0KHnN46","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":66,"y":-470,"strokeColor":"#000000","backgroundColor":"white","width":77,"height":67,"seed":1157905472,"groupIds":["ae8wl5PghCHrWlfbBZQtB","uE6YAP3tVuwGBQzTAjyj1","ZeATvV9NQ2tvvrQBMfLBS"],"strokeSharpness":"sharp","boundElementIds":[]},{"type":"rectangle","version":727,"versionNonce":3947383,"isDeleted":false,"id":"5nFgjsWABimv1miPfQxOX","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":100,"y":-478,"strokeColor":"#000000","backgroundColor":"#${clipcolor}","width":8,"height":15,"seed":2131703744,"groupIds":["_KywuGEW4AnQ8vjvxChRr","ae8wl5PghCHrWlfbBZQtB","uE6YAP3tVuwGBQzTAjyj1","ZeATvV9NQ2tvvrQBMfLBS"],"strokeSharpness":"sharp","boundElementIds":[]},{"type":"line","version":498,"versionNonce":1565563769,"isDeleted":false,"id":"bcBWrnKUT3D444KuENGMg","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":0,"opacity":100,"angle":0,"x":100.1,"y":-472.3,"strokeColor":"#000000","backgroundColor":"#fa5252","width":8,"height":0.13315579227696617,"seed":142600128,"groupIds":["_KywuGEW4AnQ8vjvxChRr","ae8wl5PghCHrWlfbBZQtB","uE6YAP3tVuwGBQzTAjyj1","ZeATvV9NQ2tvvrQBMfLBS"],"strokeSharpness":"round","boundElementIds":[],"startBinding":null,"endBinding":null,"lastCommittedPoint":null,"startArrowhead":null,"endArrowhead":null,"points":[[0,0],[6.258322237017353,-0.13315579227696617]]},{"type":"text","version":974,"versionNonce":1379120279,"isDeleted":false,"id":"cV6Su49p","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":0,"opacity":100,"angle":0,"x":${textX},"y":-460,"strokeColor":"#000000","backgroundColor":"#be4bdb","width":${width},"height":${height},"seed":13313984,"groupIds":["uE6YAP3tVuwGBQzTAjyj1","ZeATvV9NQ2tvvrQBMfLBS"],"strokeSharpness":"sharp","boundElementIds":[],"fontSize":10,"fontFamily":1,"text":"${card_title_wrapped.replaceAll("\n","\\n")}","baseline":${baseline},"textAlign":"center","verticalAlign":"top"},{"type":"text","version":685,"versionNonce":1461321015,"isDeleted":false,"id":"8aQA8O5h","fillStyle":"solid","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"angle":0,"x":132,"y":-417,"strokeColor":"#000000","backgroundColor":"#40c057","width":6,"height":13,"seed":2082117559,"groupIds":["ZeATvV9NQ2tvvrQBMfLBS"],"strokeSharpness":"sharp","boundElementIds":[],"fontSize":10,"fontFamily":1,"text":"[[${file_name}#${card_title}|»]]","baseline":9,"textAlign":"center","verticalAlign":"top"}]}`;
navigator.clipboard.writeText(result);
%>

[zsviczian]

The new script works with Excalidraw 1.3.0.

Here's the visually upgraded Empty Clothesline template. And the link to the video that will walk you through the details.

The Script

<%*
//  Initialize ExcalidrawAutomate
const ea = ExcalidrawAutomate;
ea.reset();
ea.style.fontSize = 9;
ea.style.textAlign = "center";
ea.setFontFamily(1);
ea.setFillStyle(2); //solid fill
ea.style.strokeColor = "black";
ea.setView("first");

//get offset
const towelWidth = 76;
const towelHeight = 65;
const selectedElement = ea.getViewSelectedElement();
let [offsetX,offsetY] = [0,0];
if(selectedElement) {
  offsetX = selectedElement.x;
  offsetY = selectedElement.y+towelHeight+5;
}

//Get card title and card-details file name
const file_name = tp.file.title;
const editor = app.workspace.activeLeaf.view.editor;
const curLineNum = editor.getCursor().line;
const curLine = editor.getLine(curLineNum);
const card_title = curLine.match(/#+\s+(.*)/)[1];
const card_title_wrapped = ea.wrapText(card_title,15);

//Towel
ea.style.backgroundColor = "WhiteSmoke";
const idTowel = ea.addRect(offsetX,offsetY,towelWidth,towelHeight);

//Clip
const colors = ["#40c057","#7950f2","#228be6","#fa5252","#fab005","#868e96"]
const clipcolor = colors[Math.floor(Math.random()*colors.length)];
ea.style.backgroundColor = clipcolor;
const clipWidth = 8;
const idClip  = ea.addRect(offsetX+(towelWidth-clipWidth)/2,offsetY-9,clipWidth,14);
const idClipSpring = ea.addLine([[offsetX+(towelWidth-clipWidth)/2,offsetY-2],
                                 [offsetX+(towelWidth+clipWidth)/2,offsetY-2]]);

//Text
const idText = ea.addText(offsetX,offsetY+10,card_title_wrapped);
const textElement = ea.getElement(idText);
textElement.x =  offsetX+(towelWidth - textElement.width)/2;

//Details Link
const idDetails = ea.addText(offsetX+towelWidth-11,offsetY+towelHeight-11,`[[${file_name}#${card_title}|»]]`);
const textDetails = ea.getElement(idDetails);
textDetails.width = 10; //In preview mode the text will be much shorter than the markdown supplied

//Add to the view
ea.addToGroup([idTowel,idClip,idClipSpring,idText,idDetails]);
ea.addElementsToView(!selectedElement,true); //recalculate position around pointer if no element is selected, save file after action
%>