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

Neighborhood

Mental Space

Tower

Summary

Rectangles	Fill Color	Text Width
Neighborhood
Mental Space
Tower
Summary

Image Export Settings
Scale Factor

                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; }
                .neighborhood > rect { fill: {{ neighborhoodRectangleColor }}; }
                .neighborhood > .caption-text > text { font-weight: {{ neighborhoodFontWeight }}; font-size: {{
                neighborhoodFontSize }}{{ msUnit }}; fill: {{ neighborhoodFontColor }}; font-family: {{
                neighborhoodFontFamily }}; }
                .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

Image Export Settings