Published
Edited
Dec 14, 2020
mermaid`
graph BT;
${generateMermaid([
ideal("work", "Ready to work", ["tidy", "meds", "hydration", "music", "ergonomics"], true),
ideal("meds", "Meds taken", ["hydration"], true),
ideal("hydration", "Hydrated", [], true),
ideal("music", "Listening to music", [], true),
ideal("ergonomics", "Proper desk ergonomics", ["glasses"], true),
ideal("tidy", "Tidy workspace", ["meds"], true),
ideal("glasses", "Glasses", [], true),
])}
classDef DONE fill:#8fff66
`
knodes = [
ideal("room", "Clean room", ["desk", "floor", "bed"]),
ideal("points", "No messy points", ["recycling"], true),
ideal("dishes", "No dirty dishes", ["recycling"], true),
ideal("recycling", "No recycling", [], true),
ideal("floor", "Clean floor", ["clothes" /*, "books" */]),
ideal("bed", "Fresh bed", ["clothes"]),
ideal("garbage", "No garbage", ["recycling"]),
ideal("clothes", "Clothes", ["clean clothes place", "laundry hamper"]),
ideal("clean clothes place", "Have a place for clean clothes", ["wardrobe storage"]),
ideal("laundry hamper", "Laundry hamper", []),
ideal("desk", "Clean desk", ["recycling", "dishes", "garbage", "pharma", "points"]),
ideal("pharma", "Pharmaceuticals placed", []),
ideal("wardrobe storage", "Clear hanging wardrobe storage", []),
//ideal("books", "Books", []),
];
function generateMermaid(idealConditions) {
return idealConditions.map(condition => {
return condition.dependencies.length ? condition.dependencies.map(dep => {
const depNode = findNode(idealConditions, dep);
return `${nodePrint(condition)}-->${depNode ? nodePrint(depNode) : idPrint(dep)};`;
}).join("\n") : `${nodePrint(condition)};`;
}).filter(nonEmpty => nonEmpty).join("\n")
}
function findNode(nodes, id) {
return nodes.find(node => {
return node.id === id;
});
}
function ideal(id, long, dependencies, done) {
return {
id, long, dependencies, done
}
}
function nodePrint(n) {
return `${n.long ? `${idPrint(n.id)}("${n.long}")` : idPrint(n.id)}${n.done ? ":::DONE" : ""}`
}
function idPrint(id) {
return id.split(" ").join("_");
}
import { mermaid } from "@matthewkenny/mermaid-js"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
