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

[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;}

/* Este mapa es una modificación del original hecha por Feroz-Mente*/
.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;
}

Thanks! I know what’s wrong with my CSS after I read your CSS. And I fixed my version of CSS. It works better.

Hello Peng, i copy pasted your last posted CSS but still not working for me (i’m taggin rem with #mind map).

2 Likes

My Css Code doesn’t work now for the newest version remnote. So could anybody fix it? Thank you!

This Css dosen’t work now. Can somebody to fix it? Thank you!

1 Like