Multiple nodes as one? #3976

IORoot · 2023-01-08T11:38:04Z

IORoot
Jan 8, 2023

Hi, is it at all possible to shift two or more nodes so they're touching each other?
So you could have something like:

[A] --> [B|C|D] --> [E]

So when the B|C|D is rendered they're just stacked like this:

╭──────────────────────────────────────────────────────────╮
│                            A                             │
╰──────────────────────────────────────────────────────────╯
                             |
                             |
                             |
╭──────────────────────────────────────────────────────────╮
│                            B                             │
├──────────────────────────────────────────────────────────┤
│                            C                             │
├──────────────────────────────────────────────────────────┤
│                            D                             │
╰──────────────────────────────────────────────────────────╯
                             |
                             |
                             |
╭──────────────────────────────────────────────────────────╮
│                            E                             │
╰──────────────────────────────────────────────────────────╯

Answered by IORoot

Jan 14, 2023

OK, So I thought I'd answer my own question. I've been trying to create system diagrams using the flowcharts and needed to combine some elements into a single node. I also wanted to include images/logos of technologies too. So this is how I solved it:

flowchart LR

%% LAPTOP
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef spacer     fill-opacity:0.0,stroke-width:0px,font-size:0px
	classDef laptop     fill-opacity:1.0,fill:#FFF2CC,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5
	classDef virtualbox fill-opacity:1.0,fill:#B0E3E6,color:#0E8088,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#183A61
	classDef vagrant    fill-opacity:1.0,f…

View full answer

IORoot · 2023-01-14T08:56:46Z

IORoot
Jan 14, 2023
Author

OK, So I thought I'd answer my own question. I've been trying to create system diagrams using the flowcharts and needed to combine some elements into a single node. I also wanted to include images/logos of technologies too. So this is how I solved it:

flowchart LR

%% LAPTOP
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef spacer     fill-opacity:0.0,stroke-width:0px,font-size:0px
	classDef laptop     fill-opacity:1.0,fill:#FFF2CC,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5
	classDef virtualbox fill-opacity:1.0,fill:#B0E3E6,color:#0E8088,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#183A61
	classDef vagrant    fill-opacity:1.0,fill:#BFDBFE,color:#000000,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#1868F2
	classDef rocky      fill-opacity:1.0,fill:#A7F3D0,color:#8C794C,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#10B981
    classDef apache     fill-opacity:0.0,stroke-width:0px,color:#D22128
    classDef php        fill-opacity:0.0,stroke-width:0px,color:#7EA6E0
    classDef mysql      fill-opacity:0.0,stroke-width:0px,color:#003545
    classDef cms        fill-opacity:0.0,stroke-width:0px,color:#21759B

    %% The Design and Layout
	subgraph laptop ["<div style='padding-top:20px; width:100px; text-align:center;'><svg style='display:inline; width:18px; height:18px; margin-bottom: 2px' viewBox='0 0 24 24' ><path style='fill:#D6B656;' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z'/></svg><br/>Laptop</div>"]
        direction RL
		
        spacer:::spacer

        subgraph virtualbox ["<div style='padding-top:20px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#183A61;' d='M12 0a.477.477 0 0 0-.188.047L2.17 4.274c-.265.169-.378.363-.372.692l.832 10.278c.009.107.047.165.128.25l3.564 2.713s.015 2.015.455 2.806C7.109 21.61 8.652 24.033 12 24c3.348-.033 4.988-2.03 5.484-3.028.47-.946.46-2.912.46-2.912l3.255-2.548a.31.31 0 0 0 .14-.258l.86-10.31c.026-.312-.103-.57-.368-.685L12.181.047A.435.435 0 0 0 12 0zm-.051 1.078c.054.002.108.02.188.056l7.417 3.429L12.132 8.9c-.115.058-.166.049-.264 0l-7.35-4.264c-.113-.074-.12-.125 0-.197l7.234-3.314a.534.534 0 0 1 .197-.047zm.01.688L5.905 4.591l6.042 3.49 6.067-3.48zm0 .375l5.232 2.46-3.262 1.82-1.04-.557 1.764-2.208-2.138.838L13.639 3.1l-3.252 1.346 1.1-1.15-.978-.45zm-1.837.849l.784.388-2.115 2.098 3.615-1.492-1.246 1.502 2.237-.932-1.136 1.419 1.232.666-1.56.885-5.148-2.946zm-6.93 3.902c.029 0 .072.02.135.054l7.28 4.577.017 7.818-6.853-5.057c-.077-.073-.104-.098-.103-.193l-.52-7.137c0-.043.015-.062.044-.062zm17.592.086c.03 0 .042.02.043.062l-.495 7.027c0 .096-.026.12-.103.193l-6.843 5.081.043-7.805 7.219-4.504a.348.348 0 0 1 .136-.054zm-.805 3.206l-.177.126-.133.442-.049-.315-.226.15.145.598-.224.915.233-.195.085-.527.064.413.278-.184-.195-.682zm-15.71.249c-.12-.011-.19.127-.169.37.028.327.21.72.408.877l.419.33c.2.158.338.018.307-.313-.03-.33-.216-.724-.414-.879l-.417-.323a.265.265 0 0 0-.134-.062zm.075.235a.173.173 0 0 1 .087.041l.397.31c.129.101.25.358.27.57.02.215-.07.304-.199.202l-.4-.315c-.128-.101-.246-.354-.264-.566-.014-.158.03-.249.109-.242zm14.823.103c0-.035-.074.01-.115.04-.16.123-.358.559-.372 1.068-.015.556.11.619.263.514.162-.11.382-.492.39-1.026.007-.409-.166-.491-.166-.596zm-.713.067s-.439.19-.44.295c-.01.65-.07 1.968-.07 1.968l.332-.251s.329-.218.334-.82c.003-.386-.126-.31-.126-.31s.104-.218.106-.514c.005-.445-.136-.368-.136-.368zm.602.214c.115 0 .094.268.092.446-.002.175-.088.576-.18.643-.093.068-.1-.243-.098-.423.003-.173.074-.666.186-.666zm-.72.075s.08-.05.073.214a.829.829 0 0 1-.088.328l-.134.09.006-.538zm-.512.021l-.229.14-.06 1.843s-.014.184.036.222c.072.056.267-.173.267-.173l-.004-.21s-.075.018-.072-.058zM5.25 11.16l.112 1.196.14.111-.091-.988.461.363a.47.47 0 0 1 .137.287c.01.108-.033.154-.098.103l-.396-.313.477.936.205.163-.32-.617.063.05c.137.107.23.013.208-.213-.022-.225-.15-.496-.287-.602zm13.049.78s.1-.024.09.279c-.008.257-.09.338-.09.338l-.152.11.013-.62zm-.95.174c-.042-.012-.102.006-.189.077-.107.07-.305.38-.305.38l.008.19s.114-.141.171-.187c.221-.22.165.09.165.09l-.005.099-.156.146s-.231.227-.243.658c-.006.206.068.35.18.265.11-.082.247-.33.247-.33l.004.144.19-.17.013-1.02s.043-.307-.08-.342zm-10.704.126c-.035-.028-.066-.027-.08.004l-.334.8.167.133.273-.671.254.69-.38-.3.105.28.386.307.103.28.17.134-.572-1.518a.338.338 0 0 0-.092-.139zm10.054.35l-.18.132-.01 1.078s-.098.19-.14.217c-.072.047-.07-.107-.07-.107l.015-1.02-.192.145-.015 1.02s-.011.457.182.313a.779.779 0 0 0 .222-.323l.017.128.154-.11zm-.806.11l-.164.108-.066.489-.077.049v.023l-.152.095c-.06.093-.098.38-.098.38l.002-.288-.175.124-.04 1.483.198-.143.043-.877s.032-.211.098-.321l.107-.086.017-.309.002.155.066-.056-.008.945s-.015.314.15.204c.057-.039.213-.23.213-.23L16 14.252s-.076.071-.1.086c-.037.023-.036-.058-.036-.058l.021-.915.11-.077-.003-.24-.096.06zm-8.551.14c-.124-.012-.197.13-.171.384.035.339.232.748.44.913l.449.353.062-.15-.524-.415c-.134-.107-.263-.37-.286-.59-.023-.219.07-.31.203-.206l.423.333.062-.15-.517-.408a.28.28 0 0 0-.141-.064zm9.85.172v.357s-.107.126-.156.155c-.048.029-.06-.055-.06-.129a.457.457 0 0 1 .118-.293zm-2.226.171c-.067.048-.123.188-.124.313 0 .125.053.187.12.14.068-.048.125-.188.126-.314 0-.125-.054-.188-.122-.139zm-6.887.189l.12 1.12a.296.296 0 0 0 .087.178l.673.532.062-.152-.686-.543-.11-1.022zm6.684.109l-.213.156s-.022.371-.182 1.69c-.132-.98-.132-1.45-.132-1.45l-.246.163.152 1.803.365-.208zm.259.298l-.197.141-.062 1.505.197-.142zm-5.911.446c-.127-.013-.198.133-.169.392.039.346.244.765.457.934l.46.364.064-.154-.541-.426c-.114-.09-.225-.29-.273-.485l.636.5.062-.153-.724-.57c.01-.146.094-.196.207-.107l.436.343.062-.152-.534-.418a.292.292 0 0 0-.143-.068zm.769.587c-.013.013-.02.042-.015.081a.351.351 0 0 0 .105.21c.048.038.08.006.07-.073a.36.36 0 0 0-.105-.212c-.024-.018-.042-.02-.055-.006zm.015.032c.01-.01.026-.01.045.004.038.03.074.104.08.165.008.063-.016.088-.055.058-.012-.01-.015-.035-.025-.051l.006.004-.006-.06.015.01.025.078.022.017-.03-.084h.004c.008-.002.009-.013.008-.019v-.013a.122.122 0 0 0-.025-.058.12.12 0 0 0-.026-.025l-.023-.02.015.137c-.015-.03-.037-.05-.04-.08-.005-.032 0-.053.01-.063zm.036.047l.006.004c.01.008.013.011.018.017a.07.07 0 0 1 .01.026c0 .006.002.01 0 .013-.002.006-.009.002-.015-.002l-.013-.01z'/></svg><br/>VirtualBox</div>"]
            direction RL
        
                spacer2:::spacer

                subgraph vagrant ["<div style='padding-top:20px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#1868F2;' d='M3.556 0L.392 1.846V4.11l7.124 17.3L11.998 24l4.523-2.611 7.083-17.345V1.848l.004-.002L20.44 0l-5.274 3.087v2.111l-3.168 7.384-3.164-7.384V3.109l-.017-.008.017-.01z'/></svg><br/>Vagrant</div>"]
                    direction RL

                    spacer3:::spacer

                    subgraph rocky ["<div style='padding-top:20px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#10B981;' d='M23.332 15.957c.433-1.239.668-2.57.668-3.957 0-6.627-5.373-12-12-12S0 5.373 0 12c0 3.28 1.315 6.251 3.447 8.417L15.62 8.245l3.005 3.005zm-2.192 3.819l-5.52-5.52L6.975 22.9c1.528.706 3.23 1.1 5.025 1.1 3.661 0 6.94-1.64 9.14-4.224z'/></svg>RockyOS</div>"]
                        direction RL

                        apache["<div style='border-bottom:#10B981 solid 0px; padding-bottom:20px; width:100px; margin-top:60px;'><svg style='display:inline;width:40px;height:40px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#D22128;' d='M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z'/></svg>Apache</div>"]:::apache
                           php["<div style='border-bottom:#10B981 solid 0px; padding-bottom:20px; width:100px;'><svg style='display:inline;width:40px;height:40px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#7EA6E0;' d='M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z'/></svg>PHP</div>"]:::php
                         mysql["<div style='border-bottom:#10B981 solid 0px; padding-bottom:20px; width:100px;'><svg style='display:inline;width:40px;height:40px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#003545;' d='M23.157 4.412c-.676.284-.79.31-1.673.372-.65.045-.757.057-1.212.209-.75.246-1.395.75-2.02 1.59-.296.398-1.249 1.913-1.249 1.988 0 .057-.65.998-.915 1.32-.574.713-1.08 1.079-2.14 1.59-.77.36-1.224.524-4.102 1.477-1.073.353-2.133.738-2.367.864-.852.449-1.515 1.036-2.203 1.938-1.003 1.32-.972 1.313-3.042.947a12.264 12.264 0 00-.675-.063c-.644-.05-1.023.044-1.332.334L0 17.193l.177.088c.094.05.353.234.561.398.215.17.461.347.55.391.088.044.17.088.183.101.012.013-.089.17-.228.353-.435.581-.593.871-.574 1.048.019.164.032.17.43.17.517-.006.826-.056 1.261-.208.65-.233 2.058-.94 2.784-1.4.776-.5 1.717-.998 1.956-1.042.082-.02.354-.07.594-.114.58-.107 1.464-.095 2.587.05.108.013.373.045.6.064.227.025.43.057.454.076.026.012.474.037.998.056.934.026 1.104.007 1.3-.189.126-.133.385-.631.498-.985.209-.643.417-.921.366-.492-.113.966-.322 1.692-.713 2.411-.259.499-.663 1.092-.934 1.395-.322.347-.315.36.088.315.619-.063 1.471-.397 2.096-.82.827-.562 1.647-1.691 2.19-3.03.107-.27.22-.22.183.083-.013.094-.038.315-.057.498l-.031.328.353-.202c.833-.48 1.414-1.262 2.127-2.884.227-.518.877-2.922 1.073-3.976a9.64 9.64 0 01.271-1.042c.127-.429.196-.555.48-.858.183-.19.625-.555.978-.808.72-.505.953-.75 1.187-1.205.208-.417.284-1.13.132-1.357-.132-.202-.284-.196-.763.006Z'/></svg>MySQL</div>"]:::mysql
                           cms["<div style='border-bottom:#10B981 solid 0px; padding-bottom:20px; width:100px;'><svg style='display:inline;width:40px;height:40px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/></svg>CMS</DIV>"]:::cms

                    end

                end

        end
        
	end

    %% Add the classes to the objects.
    class laptop laptop
    class virtualbox virtualbox
    class vagrant vagrant
    class rocky rocky


%% SERVER
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef server     fill-opacity:1.0,fill:#1E3A8A,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5

    %% The Design and Layout
	subgraph server ["<div style='padding-top:20px; width:100px; text-align:center;'><svg style='display:inline;width:30px;height:30px' viewBox='0 0 24 24'><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z'/></svg><br/>DigitalOcean<br/>Server</div>"]
        direction RL

        spacer:::spacer


    end

    %% Add the classes to the objects.
    class server server



%% RELATIONSHIPS
%% -------------

laptop-->server

This includes:

A hidden spacer node to give more room on the titles,
Embedded SVGs with styling
Node styling to remove the node backgrounds, etc...

1 reply

IORoot Jan 14, 2023
Author

Code for this is:


flowchart TB

    %% Define Classes to use. These control the container SVG rectangles
    classDef spacer     fill-opacity:0.0,stroke-width:0px,font-size:0px
	classDef laptop     fill-opacity:1.0,fill:#FFF2CC,color:#D6B656,stroke-width:10px,padding:0px,rx:5,ry:5
	classDef virtualbox fill-opacity:1.0,fill:#B0E3E6,color:#0E8088,stroke-width:10px,padding:0px,rx:5,ry:5,stroke:#183A61
	classDef vagrant    fill-opacity:1.0,fill:#BFDBFE,color:#000000,stroke-width:10px,padding:0px,rx:5,ry:5,stroke:#1868F2
	classDef rocky      fill-opacity:1.0,fill:#A7F3D0,color:#8C794C,stroke-width:10px,padding:0px,rx:5,ry:5,stroke:#10B981
    classDef apache     fill-opacity:0.0,stroke-width:0px,color:#EA6B66
    classDef php        fill-opacity:0.0,stroke-width:0px,color:#7EA6E0
    classDef mysql      fill-opacity:0.0,stroke-width:0px,color:#003545
    classDef cms        fill-opacity:0.0,stroke-width:0px,color:#21759B

    %% The Design and Layout
	subgraph laptop ["<div style='padding-top:20px; padding-bottom:20px; width:100px; text-align:center;'><svg style='display:inline; width:18px; height:18px; margin-right:10px; margin-bottom: 2px' viewBox='0 0 24 24' ><path style='fill:#D6B656;' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z'/></svg><br/>Laptop</div>"]
        direction RL
		
        spacer

        subgraph virtualbox ["<div style='padding-top:20px; padding-bottom:20px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px;margin-right:4px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#183A61;' d='M12 0a.477.477 0 0 0-.188.047L2.17 4.274c-.265.169-.378.363-.372.692l.832 10.278c.009.107.047.165.128.25l3.564 2.713s.015 2.015.455 2.806C7.109 21.61 8.652 24.033 12 24c3.348-.033 4.988-2.03 5.484-3.028.47-.946.46-2.912.46-2.912l3.255-2.548a.31.31 0 0 0 .14-.258l.86-10.31c.026-.312-.103-.57-.368-.685L12.181.047A.435.435 0 0 0 12 0zm-.051 1.078c.054.002.108.02.188.056l7.417 3.429L12.132 8.9c-.115.058-.166.049-.264 0l-7.35-4.264c-.113-.074-.12-.125 0-.197l7.234-3.314a.534.534 0 0 1 .197-.047zm.01.688L5.905 4.591l6.042 3.49 6.067-3.48zm0 .375l5.232 2.46-3.262 1.82-1.04-.557 1.764-2.208-2.138.838L13.639 3.1l-3.252 1.346 1.1-1.15-.978-.45zm-1.837.849l.784.388-2.115 2.098 3.615-1.492-1.246 1.502 2.237-.932-1.136 1.419 1.232.666-1.56.885-5.148-2.946zm-6.93 3.902c.029 0 .072.02.135.054l7.28 4.577.017 7.818-6.853-5.057c-.077-.073-.104-.098-.103-.193l-.52-7.137c0-.043.015-.062.044-.062zm17.592.086c.03 0 .042.02.043.062l-.495 7.027c0 .096-.026.12-.103.193l-6.843 5.081.043-7.805 7.219-4.504a.348.348 0 0 1 .136-.054zm-.805 3.206l-.177.126-.133.442-.049-.315-.226.15.145.598-.224.915.233-.195.085-.527.064.413.278-.184-.195-.682zm-15.71.249c-.12-.011-.19.127-.169.37.028.327.21.72.408.877l.419.33c.2.158.338.018.307-.313-.03-.33-.216-.724-.414-.879l-.417-.323a.265.265 0 0 0-.134-.062zm.075.235a.173.173 0 0 1 .087.041l.397.31c.129.101.25.358.27.57.02.215-.07.304-.199.202l-.4-.315c-.128-.101-.246-.354-.264-.566-.014-.158.03-.249.109-.242zm14.823.103c0-.035-.074.01-.115.04-.16.123-.358.559-.372 1.068-.015.556.11.619.263.514.162-.11.382-.492.39-1.026.007-.409-.166-.491-.166-.596zm-.713.067s-.439.19-.44.295c-.01.65-.07 1.968-.07 1.968l.332-.251s.329-.218.334-.82c.003-.386-.126-.31-.126-.31s.104-.218.106-.514c.005-.445-.136-.368-.136-.368zm.602.214c.115 0 .094.268.092.446-.002.175-.088.576-.18.643-.093.068-.1-.243-.098-.423.003-.173.074-.666.186-.666zm-.72.075s.08-.05.073.214a.829.829 0 0 1-.088.328l-.134.09.006-.538zm-.512.021l-.229.14-.06 1.843s-.014.184.036.222c.072.056.267-.173.267-.173l-.004-.21s-.075.018-.072-.058zM5.25 11.16l.112 1.196.14.111-.091-.988.461.363a.47.47 0 0 1 .137.287c.01.108-.033.154-.098.103l-.396-.313.477.936.205.163-.32-.617.063.05c.137.107.23.013.208-.213-.022-.225-.15-.496-.287-.602zm13.049.78s.1-.024.09.279c-.008.257-.09.338-.09.338l-.152.11.013-.62zm-.95.174c-.042-.012-.102.006-.189.077-.107.07-.305.38-.305.38l.008.19s.114-.141.171-.187c.221-.22.165.09.165.09l-.005.099-.156.146s-.231.227-.243.658c-.006.206.068.35.18.265.11-.082.247-.33.247-.33l.004.144.19-.17.013-1.02s.043-.307-.08-.342zm-10.704.126c-.035-.028-.066-.027-.08.004l-.334.8.167.133.273-.671.254.69-.38-.3.105.28.386.307.103.28.17.134-.572-1.518a.338.338 0 0 0-.092-.139zm10.054.35l-.18.132-.01 1.078s-.098.19-.14.217c-.072.047-.07-.107-.07-.107l.015-1.02-.192.145-.015 1.02s-.011.457.182.313a.779.779 0 0 0 .222-.323l.017.128.154-.11zm-.806.11l-.164.108-.066.489-.077.049v.023l-.152.095c-.06.093-.098.38-.098.38l.002-.288-.175.124-.04 1.483.198-.143.043-.877s.032-.211.098-.321l.107-.086.017-.309.002.155.066-.056-.008.945s-.015.314.15.204c.057-.039.213-.23.213-.23L16 14.252s-.076.071-.1.086c-.037.023-.036-.058-.036-.058l.021-.915.11-.077-.003-.24-.096.06zm-8.551.14c-.124-.012-.197.13-.171.384.035.339.232.748.44.913l.449.353.062-.15-.524-.415c-.134-.107-.263-.37-.286-.59-.023-.219.07-.31.203-.206l.423.333.062-.15-.517-.408a.28.28 0 0 0-.141-.064zm9.85.172v.357s-.107.126-.156.155c-.048.029-.06-.055-.06-.129a.457.457 0 0 1 .118-.293zm-2.226.171c-.067.048-.123.188-.124.313 0 .125.053.187.12.14.068-.048.125-.188.126-.314 0-.125-.054-.188-.122-.139zm-6.887.189l.12 1.12a.296.296 0 0 0 .087.178l.673.532.062-.152-.686-.543-.11-1.022zm6.684.109l-.213.156s-.022.371-.182 1.69c-.132-.98-.132-1.45-.132-1.45l-.246.163.152 1.803.365-.208zm.259.298l-.197.141-.062 1.505.197-.142zm-5.911.446c-.127-.013-.198.133-.169.392.039.346.244.765.457.934l.46.364.064-.154-.541-.426c-.114-.09-.225-.29-.273-.485l.636.5.062-.153-.724-.57c.01-.146.094-.196.207-.107l.436.343.062-.152-.534-.418a.292.292 0 0 0-.143-.068zm.769.587c-.013.013-.02.042-.015.081a.351.351 0 0 0 .105.21c.048.038.08.006.07-.073a.36.36 0 0 0-.105-.212c-.024-.018-.042-.02-.055-.006zm.015.032c.01-.01.026-.01.045.004.038.03.074.104.08.165.008.063-.016.088-.055.058-.012-.01-.015-.035-.025-.051l.006.004-.006-.06.015.01.025.078.022.017-.03-.084h.004c.008-.002.009-.013.008-.019v-.013a.122.122 0 0 0-.025-.058.12.12 0 0 0-.026-.025l-.023-.02.015.137c-.015-.03-.037-.05-.04-.08-.005-.032 0-.053.01-.063zm.036.047l.006.004c.01.008.013.011.018.017a.07.07 0 0 1 .01.026c0 .006.002.01 0 .013-.002.006-.009.002-.015-.002l-.013-.01z'/></svg><br/>VirtualBox</div>"]
            direction RL
        
                spacer2

                subgraph vagrant ["<div style='padding-top:20px; padding-bottom:20px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px;margin-right:4px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#1868F2;' d='M3.556 0L.392 1.846V4.11l7.124 17.3L11.998 24l4.523-2.611 7.083-17.345V1.848l.004-.002L20.44 0l-5.274 3.087v2.111l-3.168 7.384-3.164-7.384V3.109l-.017-.008.017-.01z'/></svg><br/>Vagrant</div>"]
                    direction RL

                    spacer3

                    subgraph rocky ["<div style='padding-top:20px; padding-bottom:20px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='display:inline;width:30px;height:30px;margin-right:4px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#10B981;' d='M23.332 15.957c.433-1.239.668-2.57.668-3.957 0-6.627-5.373-12-12-12S0 5.373 0 12c0 3.28 1.315 6.251 3.447 8.417L15.62 8.245l3.005 3.005zm-2.192 3.819l-5.52-5.52L6.975 22.9c1.528.706 3.23 1.1 5.025 1.1 3.661 0 6.94-1.64 9.14-4.224z'/></svg>RockyOS</div>"]
                        direction RL

                        apache["<div style='border-bottom:#999 solid 2px; padding-bottom:40px; width:100px; margin-top:60px;'><svg viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#D22128;' d='M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z'/></svg><br/>Apache</div>"]:::apache
                           php["<div style='border-bottom:#999 solid 2px; padding-bottom:40px; width:100px;'><svg viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#7EA6E0;' d='M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z'/></svg><br/>PHP</div>"]:::php
                         mysql["<div style='border-bottom:#999 solid 2px; padding-bottom:40px; width:100px;'><svg viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#003545;' d='M23.157 4.412c-.676.284-.79.31-1.673.372-.65.045-.757.057-1.212.209-.75.246-1.395.75-2.02 1.59-.296.398-1.249 1.913-1.249 1.988 0 .057-.65.998-.915 1.32-.574.713-1.08 1.079-2.14 1.59-.77.36-1.224.524-4.102 1.477-1.073.353-2.133.738-2.367.864-.852.449-1.515 1.036-2.203 1.938-1.003 1.32-.972 1.313-3.042.947a12.264 12.264 0 00-.675-.063c-.644-.05-1.023.044-1.332.334L0 17.193l.177.088c.094.05.353.234.561.398.215.17.461.347.55.391.088.044.17.088.183.101.012.013-.089.17-.228.353-.435.581-.593.871-.574 1.048.019.164.032.17.43.17.517-.006.826-.056 1.261-.208.65-.233 2.058-.94 2.784-1.4.776-.5 1.717-.998 1.956-1.042.082-.02.354-.07.594-.114.58-.107 1.464-.095 2.587.05.108.013.373.045.6.064.227.025.43.057.454.076.026.012.474.037.998.056.934.026 1.104.007 1.3-.189.126-.133.385-.631.498-.985.209-.643.417-.921.366-.492-.113.966-.322 1.692-.713 2.411-.259.499-.663 1.092-.934 1.395-.322.347-.315.36.088.315.619-.063 1.471-.397 2.096-.82.827-.562 1.647-1.691 2.19-3.03.107-.27.22-.22.183.083-.013.094-.038.315-.057.498l-.031.328.353-.202c.833-.48 1.414-1.262 2.127-2.884.227-.518.877-2.922 1.073-3.976a9.64 9.64 0 01.271-1.042c.127-.429.196-.555.48-.858.183-.19.625-.555.978-.808.72-.505.953-.75 1.187-1.205.208-.417.284-1.13.132-1.357-.132-.202-.284-.196-.763.006Z'/></svg><br/>MySQL</div>"]:::mysql
                           cms["<div style='border-bottom:#999 solid 0px; padding-bottom:40px; width:100px;'><svg viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/></svg><br/>CMS</DIV>"]:::cms

                    end

                end

        end
        
	end

%% Add the classes to the objects.
class laptop laptop
class virtualbox virtualbox
class vagrant vagrant
class rocky rocky
class spacer,spacer2,spacer3 spacer

IORoot · 2023-01-14T18:03:30Z

IORoot
Jan 14, 2023
Author

Or a more compact version:

flowchart LR

%% LAPTOP
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef spacer     fill-opacity:0.0,stroke-width:0px,font-size:0px
	classDef laptop     fill-opacity:1.0,fill:#FFF2CC,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5
	classDef virtualbox fill-opacity:1.0,fill:#B0E3E6,color:#0E8088,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#183A61
	classDef vagrant    fill-opacity:1.0,fill:#BFDBFE,color:#000000,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#1868F2
	classDef rocky      fill-opacity:1.0,fill:#A7F3D0,color:#8C794C,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#10B981
    classDef services   fill-opacity:0.0,stroke-width:0px,color:#000

    %% The Design and Layout
	subgraph laptop ["<div style='padding-top:5px; width:200px; text-align:center;'><svg style='margin-right:5px; display:inline; width:20px; height:20px; margin-bottom: 2px' viewBox='0 0 24 24' ><path style='fill:#D6B656;' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z'/></svg>Laptop</div>"]
        direction RL

        subgraph virtualbox ["<div style='padding-top:5px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#183A61;' d='M12 0a.477.477 0 0 0-.188.047L2.17 4.274c-.265.169-.378.363-.372.692l.832 10.278c.009.107.047.165.128.25l3.564 2.713s.015 2.015.455 2.806C7.109 21.61 8.652 24.033 12 24c3.348-.033 4.988-2.03 5.484-3.028.47-.946.46-2.912.46-2.912l3.255-2.548a.31.31 0 0 0 .14-.258l.86-10.31c.026-.312-.103-.57-.368-.685L12.181.047A.435.435 0 0 0 12 0zm-.051 1.078c.054.002.108.02.188.056l7.417 3.429L12.132 8.9c-.115.058-.166.049-.264 0l-7.35-4.264c-.113-.074-.12-.125 0-.197l7.234-3.314a.534.534 0 0 1 .197-.047zm.01.688L5.905 4.591l6.042 3.49 6.067-3.48zm0 .375l5.232 2.46-3.262 1.82-1.04-.557 1.764-2.208-2.138.838L13.639 3.1l-3.252 1.346 1.1-1.15-.978-.45zm-1.837.849l.784.388-2.115 2.098 3.615-1.492-1.246 1.502 2.237-.932-1.136 1.419 1.232.666-1.56.885-5.148-2.946zm-6.93 3.902c.029 0 .072.02.135.054l7.28 4.577.017 7.818-6.853-5.057c-.077-.073-.104-.098-.103-.193l-.52-7.137c0-.043.015-.062.044-.062zm17.592.086c.03 0 .042.02.043.062l-.495 7.027c0 .096-.026.12-.103.193l-6.843 5.081.043-7.805 7.219-4.504a.348.348 0 0 1 .136-.054zm-.805 3.206l-.177.126-.133.442-.049-.315-.226.15.145.598-.224.915.233-.195.085-.527.064.413.278-.184-.195-.682zm-15.71.249c-.12-.011-.19.127-.169.37.028.327.21.72.408.877l.419.33c.2.158.338.018.307-.313-.03-.33-.216-.724-.414-.879l-.417-.323a.265.265 0 0 0-.134-.062zm.075.235a.173.173 0 0 1 .087.041l.397.31c.129.101.25.358.27.57.02.215-.07.304-.199.202l-.4-.315c-.128-.101-.246-.354-.264-.566-.014-.158.03-.249.109-.242zm14.823.103c0-.035-.074.01-.115.04-.16.123-.358.559-.372 1.068-.015.556.11.619.263.514.162-.11.382-.492.39-1.026.007-.409-.166-.491-.166-.596zm-.713.067s-.439.19-.44.295c-.01.65-.07 1.968-.07 1.968l.332-.251s.329-.218.334-.82c.003-.386-.126-.31-.126-.31s.104-.218.106-.514c.005-.445-.136-.368-.136-.368zm.602.214c.115 0 .094.268.092.446-.002.175-.088.576-.18.643-.093.068-.1-.243-.098-.423.003-.173.074-.666.186-.666zm-.72.075s.08-.05.073.214a.829.829 0 0 1-.088.328l-.134.09.006-.538zm-.512.021l-.229.14-.06 1.843s-.014.184.036.222c.072.056.267-.173.267-.173l-.004-.21s-.075.018-.072-.058zM5.25 11.16l.112 1.196.14.111-.091-.988.461.363a.47.47 0 0 1 .137.287c.01.108-.033.154-.098.103l-.396-.313.477.936.205.163-.32-.617.063.05c.137.107.23.013.208-.213-.022-.225-.15-.496-.287-.602zm13.049.78s.1-.024.09.279c-.008.257-.09.338-.09.338l-.152.11.013-.62zm-.95.174c-.042-.012-.102.006-.189.077-.107.07-.305.38-.305.38l.008.19s.114-.141.171-.187c.221-.22.165.09.165.09l-.005.099-.156.146s-.231.227-.243.658c-.006.206.068.35.18.265.11-.082.247-.33.247-.33l.004.144.19-.17.013-1.02s.043-.307-.08-.342zm-10.704.126c-.035-.028-.066-.027-.08.004l-.334.8.167.133.273-.671.254.69-.38-.3.105.28.386.307.103.28.17.134-.572-1.518a.338.338 0 0 0-.092-.139zm10.054.35l-.18.132-.01 1.078s-.098.19-.14.217c-.072.047-.07-.107-.07-.107l.015-1.02-.192.145-.015 1.02s-.011.457.182.313a.779.779 0 0 0 .222-.323l.017.128.154-.11zm-.806.11l-.164.108-.066.489-.077.049v.023l-.152.095c-.06.093-.098.38-.098.38l.002-.288-.175.124-.04 1.483.198-.143.043-.877s.032-.211.098-.321l.107-.086.017-.309.002.155.066-.056-.008.945s-.015.314.15.204c.057-.039.213-.23.213-.23L16 14.252s-.076.071-.1.086c-.037.023-.036-.058-.036-.058l.021-.915.11-.077-.003-.24-.096.06zm-8.551.14c-.124-.012-.197.13-.171.384.035.339.232.748.44.913l.449.353.062-.15-.524-.415c-.134-.107-.263-.37-.286-.59-.023-.219.07-.31.203-.206l.423.333.062-.15-.517-.408a.28.28 0 0 0-.141-.064zm9.85.172v.357s-.107.126-.156.155c-.048.029-.06-.055-.06-.129a.457.457 0 0 1 .118-.293zm-2.226.171c-.067.048-.123.188-.124.313 0 .125.053.187.12.14.068-.048.125-.188.126-.314 0-.125-.054-.188-.122-.139zm-6.887.189l.12 1.12a.296.296 0 0 0 .087.178l.673.532.062-.152-.686-.543-.11-1.022zm6.684.109l-.213.156s-.022.371-.182 1.69c-.132-.98-.132-1.45-.132-1.45l-.246.163.152 1.803.365-.208zm.259.298l-.197.141-.062 1.505.197-.142zm-5.911.446c-.127-.013-.198.133-.169.392.039.346.244.765.457.934l.46.364.064-.154-.541-.426c-.114-.09-.225-.29-.273-.485l.636.5.062-.153-.724-.57c.01-.146.094-.196.207-.107l.436.343.062-.152-.534-.418a.292.292 0 0 0-.143-.068zm.769.587c-.013.013-.02.042-.015.081a.351.351 0 0 0 .105.21c.048.038.08.006.07-.073a.36.36 0 0 0-.105-.212c-.024-.018-.042-.02-.055-.006zm.015.032c.01-.01.026-.01.045.004.038.03.074.104.08.165.008.063-.016.088-.055.058-.012-.01-.015-.035-.025-.051l.006.004-.006-.06.015.01.025.078.022.017-.03-.084h.004c.008-.002.009-.013.008-.019v-.013a.122.122 0 0 0-.025-.058.12.12 0 0 0-.026-.025l-.023-.02.015.137c-.015-.03-.037-.05-.04-.08-.005-.032 0-.053.01-.063zm.036.047l.006.004c.01.008.013.011.018.017a.07.07 0 0 1 .01.026c0 .006.002.01 0 .013-.002.006-.009.002-.015-.002l-.013-.01z'/></svg>VirtualBox</div>"]
            direction RL

                subgraph vagrant ["<div style='padding-top:5px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#1868F2;' d='M3.556 0L.392 1.846V4.11l7.124 17.3L11.998 24l4.523-2.611 7.083-17.345V1.848l.004-.002L20.44 0l-5.274 3.087v2.111l-3.168 7.384-3.164-7.384V3.109l-.017-.008.017-.01z'/></svg>Vagrant</div>"]
                    direction RL

                    subgraph rocky ["<div style='padding-top:5px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#10B981;' d='M23.332 15.957c.433-1.239.668-2.57.668-3.957 0-6.627-5.373-12-12-12S0 5.373 0 12c0 3.28 1.315 6.251 3.447 8.417L15.62 8.245l3.005 3.005zm-2.192 3.819l-5.52-5.52L6.975 22.9c1.528.706 3.23 1.1 5.025 1.1 3.661 0 6.94-1.64 9.14-4.224z'/></svg>RockyOS</div>"]
                        direction RL

                            services["<div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#D22128;' d='M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z'/></svg> Apache
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#7EA6E0;' d='M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z'/></svg> PHP
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#003545;' d='M23.157 4.412c-.676.284-.79.31-1.673.372-.65.045-.757.057-1.212.209-.75.246-1.395.75-2.02 1.59-.296.398-1.249 1.913-1.249 1.988 0 .057-.65.998-.915 1.32-.574.713-1.08 1.079-2.14 1.59-.77.36-1.224.524-4.102 1.477-1.073.353-2.133.738-2.367.864-.852.449-1.515 1.036-2.203 1.938-1.003 1.32-.972 1.313-3.042.947a12.264 12.264 0 00-.675-.063c-.644-.05-1.023.044-1.332.334L0 17.193l.177.088c.094.05.353.234.561.398.215.17.461.347.55.391.088.044.17.088.183.101.012.013-.089.17-.228.353-.435.581-.593.871-.574 1.048.019.164.032.17.43.17.517-.006.826-.056 1.261-.208.65-.233 2.058-.94 2.784-1.4.776-.5 1.717-.998 1.956-1.042.082-.02.354-.07.594-.114.58-.107 1.464-.095 2.587.05.108.013.373.045.6.064.227.025.43.057.454.076.026.012.474.037.998.056.934.026 1.104.007 1.3-.189.126-.133.385-.631.498-.985.209-.643.417-.921.366-.492-.113.966-.322 1.692-.713 2.411-.259.499-.663 1.092-.934 1.395-.322.347-.315.36.088.315.619-.063 1.471-.397 2.096-.82.827-.562 1.647-1.691 2.19-3.03.107-.27.22-.22.183.083-.013.094-.038.315-.057.498l-.031.328.353-.202c.833-.48 1.414-1.262 2.127-2.884.227-.518.877-2.922 1.073-3.976a9.64 9.64 0 01.271-1.042c.127-.429.196-.555.48-.858.183-.19.625-.555.978-.808.72-.505.953-.75 1.187-1.205.208-.417.284-1.13.132-1.357-.132-.202-.284-.196-.763.006Z'/></svg> MySQL
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/></svg> CMS
                            </div></div>"]

                    end

                end

        end
        
	end

    %% Add the classes to the objects.
    class laptop laptop
    class virtualbox virtualbox
    class vagrant vagrant
    class rocky rocky
    class services services

%% SERVER
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef server     fill-opacity:1.0,fill:#1E3A8A,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5

    %% The Design and Layout
	subgraph server ["<div style='padding-top:20px; width:100px; text-align:center;'><svg style='display:inline;width:30px;height:30px' viewBox='0 0 24 24'><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z'/></svg><br/>DigitalOcean<br/>Server</div>"]
        direction RL

        spacer:::spacer


    end

    %% Add the classes to the objects.
    class server server



%% RELATIONSHIPS
%% -------------

laptop-->server

0 replies

IORoot · 2023-01-14T18:04:17Z

IORoot
Jan 14, 2023
Author

code for the compact version is:

flowchart LR

%% LAPTOP
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef spacer     fill-opacity:0.0,stroke-width:0px,font-size:0px
	classDef laptop     fill-opacity:1.0,fill:#FFF2CC,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5
	classDef virtualbox fill-opacity:1.0,fill:#B0E3E6,color:#0E8088,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#183A61
	classDef vagrant    fill-opacity:1.0,fill:#BFDBFE,color:#000000,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#1868F2
	classDef rocky      fill-opacity:1.0,fill:#A7F3D0,color:#8C794C,stroke-width:2px,padding:0px,rx:5,ry:5,stroke:#10B981
    classDef services   fill-opacity:0.0,stroke-width:0px,color:#000

    %% The Design and Layout
	subgraph laptop ["<div style='padding-top:5px; width:200px; text-align:center;'><svg style='margin-right:5px; display:inline; width:20px; height:20px; margin-bottom: 2px' viewBox='0 0 24 24' ><path style='fill:#D6B656;' d='M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z'/></svg>Laptop</div>"]
        direction RL

        subgraph virtualbox ["<div style='padding-top:5px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#183A61;' d='M12 0a.477.477 0 0 0-.188.047L2.17 4.274c-.265.169-.378.363-.372.692l.832 10.278c.009.107.047.165.128.25l3.564 2.713s.015 2.015.455 2.806C7.109 21.61 8.652 24.033 12 24c3.348-.033 4.988-2.03 5.484-3.028.47-.946.46-2.912.46-2.912l3.255-2.548a.31.31 0 0 0 .14-.258l.86-10.31c.026-.312-.103-.57-.368-.685L12.181.047A.435.435 0 0 0 12 0zm-.051 1.078c.054.002.108.02.188.056l7.417 3.429L12.132 8.9c-.115.058-.166.049-.264 0l-7.35-4.264c-.113-.074-.12-.125 0-.197l7.234-3.314a.534.534 0 0 1 .197-.047zm.01.688L5.905 4.591l6.042 3.49 6.067-3.48zm0 .375l5.232 2.46-3.262 1.82-1.04-.557 1.764-2.208-2.138.838L13.639 3.1l-3.252 1.346 1.1-1.15-.978-.45zm-1.837.849l.784.388-2.115 2.098 3.615-1.492-1.246 1.502 2.237-.932-1.136 1.419 1.232.666-1.56.885-5.148-2.946zm-6.93 3.902c.029 0 .072.02.135.054l7.28 4.577.017 7.818-6.853-5.057c-.077-.073-.104-.098-.103-.193l-.52-7.137c0-.043.015-.062.044-.062zm17.592.086c.03 0 .042.02.043.062l-.495 7.027c0 .096-.026.12-.103.193l-6.843 5.081.043-7.805 7.219-4.504a.348.348 0 0 1 .136-.054zm-.805 3.206l-.177.126-.133.442-.049-.315-.226.15.145.598-.224.915.233-.195.085-.527.064.413.278-.184-.195-.682zm-15.71.249c-.12-.011-.19.127-.169.37.028.327.21.72.408.877l.419.33c.2.158.338.018.307-.313-.03-.33-.216-.724-.414-.879l-.417-.323a.265.265 0 0 0-.134-.062zm.075.235a.173.173 0 0 1 .087.041l.397.31c.129.101.25.358.27.57.02.215-.07.304-.199.202l-.4-.315c-.128-.101-.246-.354-.264-.566-.014-.158.03-.249.109-.242zm14.823.103c0-.035-.074.01-.115.04-.16.123-.358.559-.372 1.068-.015.556.11.619.263.514.162-.11.382-.492.39-1.026.007-.409-.166-.491-.166-.596zm-.713.067s-.439.19-.44.295c-.01.65-.07 1.968-.07 1.968l.332-.251s.329-.218.334-.82c.003-.386-.126-.31-.126-.31s.104-.218.106-.514c.005-.445-.136-.368-.136-.368zm.602.214c.115 0 .094.268.092.446-.002.175-.088.576-.18.643-.093.068-.1-.243-.098-.423.003-.173.074-.666.186-.666zm-.72.075s.08-.05.073.214a.829.829 0 0 1-.088.328l-.134.09.006-.538zm-.512.021l-.229.14-.06 1.843s-.014.184.036.222c.072.056.267-.173.267-.173l-.004-.21s-.075.018-.072-.058zM5.25 11.16l.112 1.196.14.111-.091-.988.461.363a.47.47 0 0 1 .137.287c.01.108-.033.154-.098.103l-.396-.313.477.936.205.163-.32-.617.063.05c.137.107.23.013.208-.213-.022-.225-.15-.496-.287-.602zm13.049.78s.1-.024.09.279c-.008.257-.09.338-.09.338l-.152.11.013-.62zm-.95.174c-.042-.012-.102.006-.189.077-.107.07-.305.38-.305.38l.008.19s.114-.141.171-.187c.221-.22.165.09.165.09l-.005.099-.156.146s-.231.227-.243.658c-.006.206.068.35.18.265.11-.082.247-.33.247-.33l.004.144.19-.17.013-1.02s.043-.307-.08-.342zm-10.704.126c-.035-.028-.066-.027-.08.004l-.334.8.167.133.273-.671.254.69-.38-.3.105.28.386.307.103.28.17.134-.572-1.518a.338.338 0 0 0-.092-.139zm10.054.35l-.18.132-.01 1.078s-.098.19-.14.217c-.072.047-.07-.107-.07-.107l.015-1.02-.192.145-.015 1.02s-.011.457.182.313a.779.779 0 0 0 .222-.323l.017.128.154-.11zm-.806.11l-.164.108-.066.489-.077.049v.023l-.152.095c-.06.093-.098.38-.098.38l.002-.288-.175.124-.04 1.483.198-.143.043-.877s.032-.211.098-.321l.107-.086.017-.309.002.155.066-.056-.008.945s-.015.314.15.204c.057-.039.213-.23.213-.23L16 14.252s-.076.071-.1.086c-.037.023-.036-.058-.036-.058l.021-.915.11-.077-.003-.24-.096.06zm-8.551.14c-.124-.012-.197.13-.171.384.035.339.232.748.44.913l.449.353.062-.15-.524-.415c-.134-.107-.263-.37-.286-.59-.023-.219.07-.31.203-.206l.423.333.062-.15-.517-.408a.28.28 0 0 0-.141-.064zm9.85.172v.357s-.107.126-.156.155c-.048.029-.06-.055-.06-.129a.457.457 0 0 1 .118-.293zm-2.226.171c-.067.048-.123.188-.124.313 0 .125.053.187.12.14.068-.048.125-.188.126-.314 0-.125-.054-.188-.122-.139zm-6.887.189l.12 1.12a.296.296 0 0 0 .087.178l.673.532.062-.152-.686-.543-.11-1.022zm6.684.109l-.213.156s-.022.371-.182 1.69c-.132-.98-.132-1.45-.132-1.45l-.246.163.152 1.803.365-.208zm.259.298l-.197.141-.062 1.505.197-.142zm-5.911.446c-.127-.013-.198.133-.169.392.039.346.244.765.457.934l.46.364.064-.154-.541-.426c-.114-.09-.225-.29-.273-.485l.636.5.062-.153-.724-.57c.01-.146.094-.196.207-.107l.436.343.062-.152-.534-.418a.292.292 0 0 0-.143-.068zm.769.587c-.013.013-.02.042-.015.081a.351.351 0 0 0 .105.21c.048.038.08.006.07-.073a.36.36 0 0 0-.105-.212c-.024-.018-.042-.02-.055-.006zm.015.032c.01-.01.026-.01.045.004.038.03.074.104.08.165.008.063-.016.088-.055.058-.012-.01-.015-.035-.025-.051l.006.004-.006-.06.015.01.025.078.022.017-.03-.084h.004c.008-.002.009-.013.008-.019v-.013a.122.122 0 0 0-.025-.058.12.12 0 0 0-.026-.025l-.023-.02.015.137c-.015-.03-.037-.05-.04-.08-.005-.032 0-.053.01-.063zm.036.047l.006.004c.01.008.013.011.018.017a.07.07 0 0 1 .01.026c0 .006.002.01 0 .013-.002.006-.009.002-.015-.002l-.013-.01z'/></svg>VirtualBox</div>"]
            direction RL

                subgraph vagrant ["<div style='padding-top:5px; width:200px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#1868F2;' d='M3.556 0L.392 1.846V4.11l7.124 17.3L11.998 24l4.523-2.611 7.083-17.345V1.848l.004-.002L20.44 0l-5.274 3.087v2.111l-3.168 7.384-3.164-7.384V3.109l-.017-.008.017-.01z'/></svg>Vagrant</div>"]
                    direction RL

                    subgraph rocky ["<div style='padding-top:5px; width:100px; text-align:center;'><svg viewBox='0 0 24 24' style='margin-right:5px;display:inline;width:20px;height:20px' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#10B981;' d='M23.332 15.957c.433-1.239.668-2.57.668-3.957 0-6.627-5.373-12-12-12S0 5.373 0 12c0 3.28 1.315 6.251 3.447 8.417L15.62 8.245l3.005 3.005zm-2.192 3.819l-5.52-5.52L6.975 22.9c1.528.706 3.23 1.1 5.025 1.1 3.661 0 6.94-1.64 9.14-4.224z'/></svg>RockyOS</div>"]
                        direction RL

                            services["<div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#D22128;' d='M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z'/></svg> Apache
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#7EA6E0;' d='M7.01 10.207h-.944l-.515 2.648h.838c.556 0 .97-.105 1.242-.314.272-.21.455-.559.55-1.049.092-.47.05-.802-.124-.995-.175-.193-.523-.29-1.047-.29zM12 5.688C5.373 5.688 0 8.514 0 12s5.373 6.313 12 6.313S24 15.486 24 12c0-3.486-5.373-6.312-12-6.312zm-3.26 7.451c-.261.25-.575.438-.917.551-.336.108-.765.164-1.285.164H5.357l-.327 1.681H3.652l1.23-6.326h2.65c.797 0 1.378.209 1.744.628.366.418.476 1.002.33 1.752a2.836 2.836 0 0 1-.305.847c-.143.255-.33.49-.561.703zm4.024.715l.543-2.799c.063-.318.039-.536-.068-.651-.107-.116-.336-.174-.687-.174H11.46l-.704 3.625H9.388l1.23-6.327h1.367l-.327 1.682h1.218c.767 0 1.295.134 1.586.401s.378.7.263 1.299l-.572 2.944h-1.389zm7.597-2.265a2.782 2.782 0 0 1-.305.847c-.143.255-.33.49-.561.703a2.44 2.44 0 0 1-.917.551c-.336.108-.765.164-1.286.164h-1.18l-.327 1.682h-1.378l1.23-6.326h2.649c.797 0 1.378.209 1.744.628.366.417.477 1.001.331 1.751zM17.766 10.207h-.943l-.516 2.648h.838c.557 0 .971-.105 1.242-.314.272-.21.455-.559.551-1.049.092-.47.049-.802-.125-.995s-.524-.29-1.047-.29z'/></svg> PHP
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#003545;' d='M23.157 4.412c-.676.284-.79.31-1.673.372-.65.045-.757.057-1.212.209-.75.246-1.395.75-2.02 1.59-.296.398-1.249 1.913-1.249 1.988 0 .057-.65.998-.915 1.32-.574.713-1.08 1.079-2.14 1.59-.77.36-1.224.524-4.102 1.477-1.073.353-2.133.738-2.367.864-.852.449-1.515 1.036-2.203 1.938-1.003 1.32-.972 1.313-3.042.947a12.264 12.264 0 00-.675-.063c-.644-.05-1.023.044-1.332.334L0 17.193l.177.088c.094.05.353.234.561.398.215.17.461.347.55.391.088.044.17.088.183.101.012.013-.089.17-.228.353-.435.581-.593.871-.574 1.048.019.164.032.17.43.17.517-.006.826-.056 1.261-.208.65-.233 2.058-.94 2.784-1.4.776-.5 1.717-.998 1.956-1.042.082-.02.354-.07.594-.114.58-.107 1.464-.095 2.587.05.108.013.373.045.6.064.227.025.43.057.454.076.026.012.474.037.998.056.934.026 1.104.007 1.3-.189.126-.133.385-.631.498-.985.209-.643.417-.921.366-.492-.113.966-.322 1.692-.713 2.411-.259.499-.663 1.092-.934 1.395-.322.347-.315.36.088.315.619-.063 1.471-.397 2.096-.82.827-.562 1.647-1.691 2.19-3.03.107-.27.22-.22.183.083-.013.094-.038.315-.057.498l-.031.328.353-.202c.833-.48 1.414-1.262 2.127-2.884.227-.518.877-2.922 1.073-3.976a9.64 9.64 0 01.271-1.042c.127-.429.196-.555.48-.858.183-.19.625-.555.978-.808.72-.505.953-.75 1.187-1.205.208-.417.284-1.13.132-1.357-.132-.202-.284-.196-.763.006Z'/></svg> MySQL
                                </div><div style='width:100px;margin-top:-20px;text-align:left;'>
                                    <svg style='display:inline;width:20px;height:20px;' viewBox='0 0 24 24' ><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M21.469 6.825c.84 1.537 1.318 3.3 1.318 5.175 0 3.979-2.156 7.456-5.363 9.325l3.295-9.527c.615-1.54.82-2.771.82-3.864 0-.405-.026-.78-.07-1.11m-7.981.105c.647-.03 1.232-.105 1.232-.105.582-.075.514-.93-.067-.899 0 0-1.755.135-2.88.135-1.064 0-2.85-.15-2.85-.15-.585-.03-.661.855-.075.885 0 0 .54.061 1.125.09l1.68 4.605-2.37 7.08L5.354 6.9c.649-.03 1.234-.1 1.234-.1.585-.075.516-.93-.065-.896 0 0-1.746.138-2.874.138-.2 0-.438-.008-.69-.015C4.911 3.15 8.235 1.215 12 1.215c2.809 0 5.365 1.072 7.286 2.833-.046-.003-.091-.009-.141-.009-1.06 0-1.812.923-1.812 1.914 0 .89.513 1.643 1.06 2.531.411.72.89 1.643.89 2.977 0 .915-.354 1.994-.821 3.479l-1.075 3.585-3.9-11.61.001.014zM12 22.784c-1.059 0-2.081-.153-3.048-.437l3.237-9.406 3.315 9.087c.024.053.05.101.078.149-1.12.393-2.325.609-3.582.609M1.211 12c0-1.564.336-3.05.935-4.39L7.29 21.709C3.694 19.96 1.212 16.271 1.211 12M12 0C5.385 0 0 5.385 0 12s5.385 12 12 12 12-5.385 12-12S18.615 0 12 0'/></svg> CMS
                            </div></div>"]

                    end

                end

        end
        
	end

    %% Add the classes to the objects.
    class laptop laptop
    class virtualbox virtualbox
    class vagrant vagrant
    class rocky rocky
    class services services

%% SERVER
%% ------

    %% Define Classes to use. These control the container SVG rectangles
    classDef server     fill-opacity:1.0,fill:#1E3A8A,color:#D6B656,stroke-width:2px,padding:0px,rx:5,ry:5

    %% The Design and Layout
	subgraph server ["<div style='padding-top:20px; width:100px; text-align:center;'><svg style='display:inline;width:30px;height:30px' viewBox='0 0 24 24'><path style='fill-opacity:1.0;stroke-width:0.0;fill:#21759B;' d='M12.04 0C5.408-.02.005 5.37.005 11.992h4.638c0-4.923 4.882-8.731 10.064-6.855a6.95 6.95 0 014.147 4.148c1.889 5.177-1.924 10.055-6.84 10.064v-4.61H7.391v4.623h4.61V24c7.86 0 13.967-7.588 11.397-15.83-1.115-3.59-3.985-6.446-7.575-7.575A12.8 12.8 0 0012.039 0zM7.39 19.362H3.828v3.564H7.39zm-3.563 0v-2.978H.85v2.978z'/></svg><br/>DigitalOcean<br/>Server</div>"]
        direction RL

        spacer:::spacer


    end

    %% Add the classes to the objects.
    class server server



%% RELATIONSHIPS
%% -------------

laptop-->server

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mermaid-js

Multiple nodes as one? #3976

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 1 reply

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

mermaid-js

Multiple nodes as one? #3976

IORoot Jan 8, 2023

Replies: 3 comments · 1 reply

IORoot Jan 14, 2023 Author

IORoot Jan 14, 2023 Author

IORoot Jan 14, 2023 Author

IORoot Jan 14, 2023 Author

IORoot
Jan 8, 2023

Replies: 3 comments 1 reply

IORoot
Jan 14, 2023
Author

IORoot Jan 14, 2023
Author

IORoot
Jan 14, 2023
Author

IORoot
Jan 14, 2023
Author