By taking a page from RoamEdit, I wrote a CSS to draw a mind map

114514 · December 22, 2021, 5:15pm

The code is below

.tree-node-container[data-rem-container-tags*="mind-map"] 
{
    order: 2;

    overflow: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.tree-node-container[data-rem-container-tags*="mind-map"]  .TreeNode
{
    border-width: 0px!important;
}

.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node-container
{

    order: 2;
    display: flex;
    align-items: center;
    margin: 0px;
    text-align: left;
    
}


.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children, .tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children  .tree-node--parent , .tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children  .tree-node-container
{
    position: relative;

}

.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children .tree-node--parent .rem-text .EditorContainer 
{
    display: block;
    min-width: 10em;
    z-index:1;

}



.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children>.tree-node-container:not(:only-child)::before
{
	content:' ';

	position: absolute;
    left: 0px;
    display: block;
    border-left: 1px solid;
    height: calc(100% + 0px);
}



.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children>.tree-node-container:nth-of-type(1):not(:only-child)::before
{
	content:' ';
	position:absolute;

    top: 50%;
    width: 5px;
    height: 50%;

    border-top-left-radius: 5px;
    border-top: 1px solid;
}

.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children>div.tree-node-container:last-of-type:not(:only-child)::before
{
	content:' ';
	position:absolute;
    width: 5px;
    border-left:1px solid;
    height: calc(50% + 0px);
    bottom: 50%;
    border-bottom-left-radius: 5px;
    border-bottom: 1px solid;


}



.tree-node-container[data-rem-container-tags*="mind-map"] .tree-node--children:not(:empty)::before
{
	content: ' ';
    position: absolute;
    display: block;
    top: 50%;
    left: 8px;
    width: 6px;
    height: 6px;
    border-top: 1px solid ;
    border-left: 1px solid ;
    transform: rotate(-45deg);
    background-color: #fff;
    z-index: 10;
}

and this is the result
from

to

Jaflo · December 23, 2021, 4:46pm

I love you! with all my heart, thank you so much!

Anthonyrc · December 23, 2021, 7:03pm

I love this! Thanks a lot for the wonderful CSS code!

Sai_Prasanth_R · December 24, 2021, 9:22am

It’s nice. When I copied the code and added the tag it’s not working?

TaQuangKhoi · December 24, 2021, 9:23am

This is Custom CSS, You can learn how to use them at this link

Sai_Prasanth_R · December 24, 2021, 9:25am

I have exactly copied and followed the same process.But still not showing

TaQuangKhoi · December 24, 2021, 12:20pm

You can watch the video I recorded

URL of video

Sai_Prasanth_R · December 24, 2021, 3:37pm

Thank you so much. I have been typing “mind-map” instead of “mind map”

Anthonyrc · December 24, 2021, 10:18pm

Use the “Mind map” tag, instead of the one in the CSS code. It worked for me.

Feroz-Mente · December 26, 2021, 12:07am

I’m in love! Here you can see some changes:

Sai_Prasanth_R · December 26, 2021, 6:11am

This looks amazing.Kindly post the changed CSS code

Jaflo · December 28, 2021, 8:44pm

Puedes compartir el css??

Feroz-Mente · December 28, 2021, 11:15pm

Of course! Está en mi canal de Youtube: Feroz-Mente https://youtu.be/INKIckYZqBk

.tree-node-container[data-rem-container-tags*=“mind-map”]
{
order: 2;
overflow: scroll;
display: flex;
align-items: center;
position: relative;
background-color: transparent;
text-align: left;
border: 2px;
border-style: solid;
border-color: #FFB094;
border-radius: 15px;
font-weight: normal;
margin: 5px 5px 5px 0px;
padding:10px 25px 25px 0px;
font-family: “olivier”;
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node-container
{
order: 2;
display: flex;
align-items: center;
margin: 0px;
text-align: left;
font-family: “warung-kopi”;
}

/* título*/
[data-rem-container-tags*=“mind-map”] > :first-child {
border-color: #FAF0FF;
border: 2px;
border-radius: 5px;

margin-left: 1em;
margin-right: 20px ;
background-color: #FFF0F0;
text-align: center;
Font-size: 19px;
font-weight: bold;
margin: 5.5px;
font-family: “warung-kopi”;
}

/* primera columna del mapa*/
.tree-node-container[data-rem-container-tags*=“mind-map”] > .TreeNode > .tree-node-container > div:first-child {
background-color: #FFEDDF;
border-radius: 8px;
margin: 8px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid grey;
min-width: inherit;
padding-right: 2px;
Padding-left: -2px;
display: flex!important;
font-family: “warung-kopi”;
}

/* segunda columna del mapa*/
[data-rem-container-tags*=“mind-map”]

.TreeNode > .tree-node-container
.TreeNode > .tree-node-container > div:first-child {
padding-left: 0px;
background-color: #FFFDE8;
border-radius: 8px;
line-height: 20px;
padding: 1px;
margin: 8px;
border-bottom:1px solid grey;
min-width: auto;
display: flex!important;
}

/* tercera columna del mapa*/
[data-rem-container-tags*=“mind-map”]

.TreeNode > .tree-node-container
.TreeNode > .tree-node-container
.TreeNode > .tree-node-container > div:first-child {
padding-left: 0px;
background-color: #F2FCF9;
border-radius: 8px;
line-height: 2px;
padding: 1px;
margin: 8px;
border-bottom: 1px solid grey;
min-width: auto;
display: flex!important;
}
/* cuarta columna del mapa*/
[data-rem-container-tags*=“mind-map”] > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container > .TreeNode > .tree-node-container { padding-left: 0px; background-color: #fcfcfc; border-radius: 8px; line-height: 2px; padding: 1px; margin: 6px; border-bottom: 1px solid grey; }

.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children, .tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children .tree-node–parent , .tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children .tree-node-container
{
position: relative;
}

.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children .tree-node–parent .rem-text .EditorContainer
{
display: flex!important;
min-width: 8em;
z-index:1;
padding-right: 2px;
align-items: center;
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children>.tree-node-container:not(:only-child)::before
{
content:’ ‘;
position: absolute;
left: 0px;
display: block;
border-left: 2px solid;
border-color: #FFB094;
height: calc(110% + 0px);
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children>.tree-node-container:nth-of-type(1):not(:only-child)::before
{
content:’ ‘;
position:absolute;
top: 50%;
width: 5px;
height: 50%;
border-top-left-radius: 5px;
border-top: 2px solid;
border-color: #FFB094;
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children>div.tree-node-container:last-of-type:not(:only-child)::before
{
content:’ ';
position:absolute;
width: 5px;
border-left:2px solid;
height: calc(50% + 0px);
bottom: 50%;
border-bottom: 2px solid;
border-bottom-left-radius: 5px;
border-color: #FFB094
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .tree-node–children:not(:empty)::before
{
content: ’ ';
position: absolute;
display: block;
top: 50%;
left: 8px;
width: 6px;
height: 6px;
border-top: 2px solid;
border-left: 2px solid;
border-color: #FFB094;
transform: rotate(-45deg);
background-color: #fff;
z-index: 10;
}
.tree-node-container[data-rem-container-tags*=“mind-map”] > .TreeNode .tree-node-container > div:first-child:not(:hover) .rem-bullet__container {
visibility: hidden!important;
}
.tree-node-container[data-rem-container-tags*=“mind-map”] .TreeNode
{
border-width: 0px!important;
}

Yongkun_Liu · January 6, 2022, 5:32am

Your code in the forum can’t work, but the code on your YouTube’s Google Docs can work.

Deng · January 6, 2022, 4:22pm

引号变成中文的了，替换掉就好了
replace “ and ” with "

Deng · January 6, 2022, 5:06pm

用下面的代码可以隐藏标签（focused 的时候显示一个 X）
To hide the tags (show a X when focused)

[data-rem-tags~="mind-map"] .rem-container--focused .hierarchy-editor__tag-bar__tag .hierarchy-editor__tag-bar__tag__delete {display:inline!important;}
[data-rem-tags~="mind-map"] .hierarchy-editor__tag-bar__tag .hierarchy-editor__tag-bar__tag__delete {display:none!important;}
[data-rem-tags~="mind-map"] .hierarchy-editor__tag-bar__tag {font-size: 0px;}

Diego_MH · May 21, 2022, 12:28am

Beautiful, thank you!

Peng · July 14, 2022, 3:20am

This CSS dosen’t work for version 1.8. Could someone fix it? This is my favorite CSS. Thanks!

Void_Triangle · July 24, 2022, 7:19pm

Fixed CSS

.animate-zoom-into-bullet[data-rem-container-tags*="mind-map"]

{
order: 2;
overflow: scroll;
display: flex;
align-items: center;
position: relative;
background-color: transparent;
text-align: left;
border: 2px;
border-style: solid;
border-color: #FFB094;
border-radius: 15px;
font-weight: normal;
margin: 5px 5px 5px 0px;
padding:10px 25px 25px 0px;
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .animate-zoom-into-bullet
{
order: 2;
display: flex;
align-items: center;
margin: 0px;
text-align: left;
}

/* título*/
[data-rem-container-tags*=“mind-map”] > :first-child {
border-color: #FAF0FF;
border: 2px;
border-radius: 5px;

margin-left: 1em;
margin-right: 20px ;
background-color: #FFF0F0;
text-align: center;
Font-size: 19px;
font-weight: bold;
margin: 5.5px;

}

/* primera columna del mapa*/
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] > .TreeNode > .animate-zoom-into-bullet > div:first-child {
background-color: #FFEDDF;
border-radius: 8px;
margin: 8px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid grey;
min-width: inherit;
padding-right: 2px;
Padding-left: -2px;
display: flex!important;
}

/* segunda columna del mapa*/
[data-rem-container-tags*=“mind-map”]
> .TreeNode > .animate-zoom-into-bullet
> .TreeNode > .animate-zoom-into-bullet {
padding-left: 0px;
background-color: #FFFDE8;
border-radius: 8px;
line-height: 20px;
padding: 1px;
margin: 8px;
border-bottom:1px solid grey;
min-width: auto;
display: flex!important;
}

/* tercera columna del mapa*/
[data-rem-container-tags*=“mind-map”]
> .TreeNode > .animate-zoom-into-bullet
> .TreeNode > .animate-zoom-into-bullet
> .TreeNode > .animate-zoom-into-bullet {
padding-left: 0px;
background-color: #F2FCF9;
border-radius: 8px;
line-height: 2px;
padding: 1px;
margin: 8px;
border-bottom: 1px solid grey;
min-width: auto;
display: flex!important;
}
/* cuarta columna del mapa*/
[data-rem-container-tags*=“mind-map”] > .TreeNode > .animate-zoom-into-bullet > .TreeNode > .animate-zoom-into-bullet > .TreeNode > .animate-zoom-into-bullet > .TreeNode > .animate-zoom-into-bullet { padding-left: 0px; background-color: #fcfcfc; border-radius: 8px; line-height: 2px; padding: 1px; margin: 6px; border-bottom: 1px solid grey; }

.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children, .animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children .tree-node–parent , .animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children .animate-zoom-into-bullet
{
position: relative;
}

.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children .tree-node–parent .rem-text .EditorContainer
{
display: flex!important;
min-width: 8em;
z-index:1;
padding-right: 2px;
align-items: center;
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children>.animate-zoom-into-bullet:not(:only-child)::before
{
content:’ ‘;
position: absolute;
left: 0px;
display: block;
border-left: 2px solid;
border-color: #FFB094;
height: calc(110% + 0px);
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children>.animate-zoom-into-bullet:nth-of-type(1):not(:only-child)::before
{
content:’ ‘;
position:absolute;
top: 50%;
width: 5px;
height: 50%;
border-top-left-radius: 5px;
border-top: 2px solid;
border-color: #FFB094;
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children>div.animate-zoom-into-bullet:last-of-type:not(:only-child)::before
{
content:’ ';
position:absolute;
width: 5px;
border-left:2px solid;
height: calc(50% + 0px);
bottom: 50%;
border-bottom: 2px solid;
border-bottom-left-radius: 5px;
border-color: #FFB094
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .tree-node–children:not(:empty)::before
{
content: ’ ';
position: absolute;
display: block;
top: 50%;
left: 8px;
width: 6px;
height: 6px;
border-top: 2px solid;
border-left: 2px solid;
border-color: #FFB094;
transform: rotate(-45deg);
background-color: #fff;
z-index: 10;
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] > .TreeNode .animate-zoom-into-bullet > div:first-child:not(:hover) .rem-bullet__container {
visibility: hidden!important;
}
.animate-zoom-into-bullet[data-rem-container-tags*=“mind-map”] .TreeNode
{
border-width: 0px!important;
}

[data-rem-tags~=“mind-map”] .rem-container–focused .hierarchy-editor__tag-bar__tag .hierarchy-editor__tag-bar__tag__delete {display:inline!important;}
[data-rem-tags~=“mind-map”] .hierarchy-editor__tag-bar__tag .hierarchy-editor__tag-bar__tag__delete {display:none!important;}
[data-rem-tags~=“mind-map”] .hierarchy-editor__tag-bar__tag {font-size: 0px;}

Void_Triangle · July 24, 2022, 7:19pm

Hey Peng Please check Fixed CSS