Skip to content

Instantly share code, notes, and snippets.

@leonid-shevtsov

leonid-shevtsov/README.md

Created June 20, 2024 08:44
Show Gist options
  • Save leonid-shevtsov/c07cf787c7bf0d3bbf122bff475ac4a5 to your computer and use it in GitHub Desktop.
Save leonid-shevtsov/c07cf787c7bf0d3bbf122bff475ac4a5 to your computer and use it in GitHub Desktop.
Download ZIP
Mindmap helpers for Obsidian Canvas Style Menu
Raw
README.md
  1. Install https://github.com/michaellw/Obsidian-Canvas-Style-Menu into your vault
  2. Copy mindmap_helpers.json to vault/.obsidian/plugins/canvas-style-menu/packages/mindmap_helpers.json
  3. Copy mindmap_helpers.css to `vault/.obsidian/snippets
  4. Enable "Mindmap Helpers" in Canvas Style Menu settings
  5. Enable snippets in Appearance settings
Raw
mindmap_helpers.css
@charset "UTF-8";
.canvas-node.mindmap-kind-question .canvas-node-container {
border-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-base-00));
}
.canvas-node.mindmap-kind-question::after {
content: "?";
text-align: center;
line-height: 1.5384615385em;
width: 1.5384615385em;
height: 1.5384615385em;
position: absolute;
left: -0.7692307692em;
top: -0.7692307692em;
border: solid 2px var(--color-yellow);
border-radius: 1.5384615385em;
color: var(--color-base-100);
font-size: 1.3em;
background-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-base-00));
font-weight: bold;
}
.canvas-node.mindmap-kind-task .canvas-node-container {
border-color: color-mix(in srgb, var(--color-red) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-red) 10%, var(--color-base-00));
}
.canvas-node.mindmap-kind-task::after {
content: "!";
text-align: center;
line-height: 1.5384615385em;
width: 1.5384615385em;
height: 1.5384615385em;
position: absolute;
left: -0.7692307692em;
top: -0.7692307692em;
border: solid 2px var(--color-red);
border-radius: 1.5384615385em;
color: var(--color-base-100);
font-size: 1.3em;
background-color: color-mix(in srgb, var(--color-red) 50%, var(--color-base-00));
font-weight: bold;
}
.canvas-node.mindmap-kind-fact .canvas-node-container {
border-color: color-mix(in srgb, var(--color-purple) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-purple) 10%, var(--color-base-00));
}
.canvas-node.mindmap-kind-fact::after {
content: " ✎";
text-align: center;
line-height: 1.3333333333em;
width: 1.3333333333em;
height: 1.3333333333em;
position: absolute;
left: -0.6666666667em;
top: -0.6666666667em;
border: solid 2px var(--color-purple);
border-radius: 1.3333333333em;
color: var(--color-base-100);
font-size: 1.5em;
background-color: color-mix(in srgb, var(--color-purple) 50%, var(--color-base-00));
font-weight: bold;
}
.canvas-node.mindmap-kind-idea .canvas-node-container {
border-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-blue) 10%, var(--color-base-00));
}
.canvas-node.mindmap-kind-idea::after {
content: "➷";
text-align: center;
line-height: 1.6em;
width: 1.6em;
height: 1.6em;
position: absolute;
left: -0.8em;
top: -0.8em;
border: solid 2px var(--color-blue);
border-radius: 1.6em;
color: var(--color-base-100);
font-size: 1.25em;
background-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-base-00));
font-weight: bold;
}
.canvas-node.mindmap-status-completed::after {
content: "✓";
border-color: var(--color-green);
background-color: color-mix(in srgb, var(--color-green) 50%, var(--color-base-00));
}
.canvas-node.mindmap-status-completed .canvas-node-container {
border-color: color-mix(in srgb, var(--color-green) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-green) 10%, var(--color-base-00));
}
.canvas-node.mindmap-status-cancelled::after {
content: "✗";
border-color: var(--color-base-40);
background-color: color-mix(in srgb, var(--color-base-40) 50%, var(--color-base-00));
}
.canvas-node.mindmap-status-cancelled .canvas-node-container {
border-color: color-mix(in srgb, var(--color-base-40) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-base-40) 10%, var(--color-base-00));
}
.canvas-node.mindmap-status-blocked::after {
border-color: var(--color-cyan);
background-color: color-mix(in srgb, var(--color-cyan) 50%, var(--color-base-00));
}
.canvas-node.mindmap-status-blocked .canvas-node-container {
border-color: color-mix(in srgb, var(--color-cyan) 50%, var(--color-base-00));
background-color: color-mix(in srgb, var(--color-cyan) 10%, var(--color-base-00));
}
.canvas-node.mindmap-size-large .canvas-node-container {
border-width: 3px;
border-color: var(--color-base-50);
}
.canvas-node.mindmap-size-large .markdown-preview-view {
zoom: 1.3;
}
.canvas-node.mindmap-size-xlarge .canvas-node-container {
border-width: 3px;
border-color: var(--color-base-80);
}
.canvas-node.mindmap-size-xlarge .markdown-preview-view {
zoom: 1.5;
}
Raw
mindmap_helpers.json
{
"MindmapHelpers": {
"name": "Mindmap Helpers",
"menuItems": [
{
"class": "mindmap-kind",
"type": "mindmapKind",
"name": "Node kind",
"enable": true,
"expanded": true,
"icon": "kind"
},
{
"class": "mindmap-status",
"type": "mindmapStatus",
"name": "Node status",
"enable": true,
"expanded": true,
"icon": "status"
},
{
"class": "mindmap-size",
"type": "mindmapSize",
"name": "Node size",
"enable": true,
"expanded": true,
"icon": "size"
}
],
"subMenuItems": {
"mindmapKind": [
{
"class": "mindmap-kind-task",
"type": "mindmapKind",
"name": "Task",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "kind"
},
{
"class": "mindmap-kind-question",
"type": "mindmapKind",
"name": "Question",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "kind"
},
{
"class": "mindmap-kind-fact",
"type": "mindmapKind",
"name": "Fact",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "kind"
},
{
"class": "mindmap-kind-idea",
"type": "mindmapKind",
"name": "Idea",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "kind"
}
],
"mindmapStatus": [
{
"class": "mindmap-status-completed",
"type": "mindmapStatus",
"name": "Completed",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "status"
},
{
"class": "mindmap-status-cancelled",
"type": "mindmapStatus",
"name": "Cancelled",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "status"
},
{
"class": "mindmap-status-blocked",
"type": "mindmapStatus",
"name": "Blocked",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "status"
}
],
"mindmapSize": [
{
"class": "mindmap-size-large",
"type": "mindmapSize",
"name": "Large",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "size"
},
{
"class": "mindmap-size-xlarge",
"type": "mindmapSize",
"name": "Extra large",
"cat": "",
"selector": "",
"ctxmenu": false,
"enable": true,
"icon": "size"
}
]
},
"customIcons": [
{
"name": "kind",
"svgContent": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V64 350.5 400v88c0 13.3 10.7 24 24 24s24-10.7 24-24V388l80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52V24zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8V334.7l-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5v-237z\"/></svg>"
},
{
"name": "status",
"svgContent": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"/></svg>"
},
{
"name": "size",
"svgContent": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d=\"M177.9 494.1c-18.7 18.7-49.1 18.7-67.9 0L17.9 401.9c-18.7-18.7-18.7-49.1 0-67.9l50.7-50.7 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 50.7-50.7c18.7-18.7 49.1-18.7 67.9 0l92.1 92.1c18.7 18.7 18.7 49.1 0 67.9L177.9 494.1z\"/></svg>"
}
]
}
}
Raw
mindmap_helpers.scss
@mixin mindmap-kind($color, $icon, $font-size) {
.canvas-node-container {
border-color: color-mix(in srgb, $color 50%, var(--color-base-00));
background-color: color-mix(in srgb, $color 10%, var(--color-base-00));
}
&::after {
content: $icon;
text-align: center;
line-height: calc(2em / $font-size);
width: calc(2em / $font-size);
height: calc(2em / $font-size);
position: absolute;
left: calc(-1em / $font-size);
top: calc(-1em / $font-size);
border: solid 2px $color;
border-radius: calc(2em / $font-size);
color: var(--color-base-100);
font-size: calc($font-size * 1em);
background-color: color-mix(in srgb, $color 50%, var(--color-base-00));
font-weight: bold;
}
}
.canvas-node.mindmap-kind-question {
@include mindmap-kind(var(--color-yellow), "?", 1.3);
}
.canvas-node.mindmap-kind-task {
@include mindmap-kind(var(--color-red), "!", 1.3);
}
.canvas-node.mindmap-kind-fact {
@include mindmap-kind(var(--color-purple), " ✎", 1.5);
}
.canvas-node.mindmap-kind-idea {
@include mindmap-kind(var(--color-blue), "➷", 1.25);
}
@mixin mindmap-status($color, $content: null) {
&::after {
@if $content {
content: $content;
}
border-color: $color;
background-color: color-mix(in srgb, $color 50%, var(--color-base-00));
}
.canvas-node-container {
border-color: color-mix(in srgb, $color 50%, var(--color-base-00));
background-color: color-mix(in srgb, $color 10%, var(--color-base-00));
}
}
.canvas-node.mindmap-status-completed {
@include mindmap-status(var(--color-green), "✓");
}
.canvas-node.mindmap-status-cancelled {
@include mindmap-status(var(--color-base-40), "✗");
}
.canvas-node.mindmap-status-blocked {
@include mindmap-status(var(--color-cyan));
}
.canvas-node.mindmap-size-large .canvas-node-container {
border-width: 3px;
border-color: var(--color-base-50);
}
.canvas-node.mindmap-size-large .markdown-preview-view {
zoom: 1.3;
}
.canvas-node.mindmap-size-xlarge .canvas-node-container {
border-width: 3px;
border-color: var(--color-base-80);
}
.canvas-node.mindmap-size-xlarge .markdown-preview-view {
zoom: 1.5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment