Mental Model Diagram Generator Demo

Mental Model Diagram Generator

This is a server-less page to generate mental models from xsl files. Please, select a model xlsx file (e.g. dog_mm_diagram.xlsx):

Fonts

Font Family

px	pt
Font Size

Font Weight

Font Color

Mental Space

Tower

Box

Rectangles	Fill Color	Text Width
Mental Space
Tower
Box

                svg {
                /* Illustrator CCS5 does not support sans-serif font family, specifying specific sans-serif font does
                seem to work */
                font-family: {{ towerFontFamily }} ;
                /* Illustrator CCS5 does not seem to support the 'rem' size unit */
                font-size: 24px ;

                --mm-padding-x: 10;
                --mm-padding-y: 10;
                --mm-margin-x: 10;
                --mm-margin-y: 3;
                --mm-text-height: 20;
                --mm-line-height: 1.1;
                --mm-box-height: 600;
                --mm-height-max: 0;
                --mm-class: box;
                }
                text { fill: black; }
                .mental-space > rect { fill: {{ mentalSpaceRectangleColor }}; }
                .mental-space > .caption-text > text { font-weight: {{ mentalSpaceFontWeight }}; font-size: {{
                mentalSpaceFontSize }}{{ msUnit }}; fill: {{ mentalSpaceFontColor }}; font-family: {{
                mentalSpaceFontFamily }}; }
                .tower > .caption-text { font-size: {{ towerFontSize }}{{ msUnit }}; font-weight: {{ towerFontWeight }};
                font-family: {{ towerFontFamily }}; }
                .tower > .caption-text { fill: {{ towerFontColor }}; }
                .tower > rect { fill: {{ towerRectangleColor }} ; }
                .tower-boxes { --mm-text-width: {{ boxTextWidth }}; }
                .box { font-size: {{ boxFontSize }}{{ msUnit }}; font-family: {{ boxFontFamily }}; font-weight: {{
                boxFontWeight }}; }
                .box > text { fill: {{ boxTextColor }}; }
                .box > rect { fill: {{ boxRectangleColor }}; }
                /* note that Adobe Illustrator is said to only include the styles of a first matching selector instead of the conventional last-wins css selection rule */
                /* for instance, if a element with class "box" exists, and two fill rules are defined (e.g., white, red), Illustrator only take the first rule, making all boxes white. */
                .box-idtype > rect { fill: {{ boxRectangleColor }}; }

Mental Model Diagram Generator

Fonts

Rectangles