<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<title>Online Mind Map Maker - Mindclouds.com</title>
<meta charset="utf-8">
<meta name="author" content="Zygomatic">
<!-- Programming by WebGear, webgear.nl -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://www.googleanalytics.com">
<link rel="preconnect" href="https://adservice.google.com">
<link rel="preconnect" href="https://googleads.g.doubleclick.net">
<link rel="preconnect" href="https://pagead2.googlesyndication.com">
<link rel="preconnect" href="https://tpc.googlesyndication.com">
<link rel="preconnect" href="https://www.googletagservices.com">
<meta name="description" content="MindClouds.com is a free online Mind Mapping tool and Mind Map Maker. Create your own Mind Clouds or Mind Maps to visualize your ideas and to structure and organize your brainstorm. Start with a central concept and add nodes as associations with that central idea. Customize your Mind Cloud with icons, images, colors and text and save the result that you can edit later. You can finally save your Mind Map as an image.">
<meta property="og:title" content="Online Mind Map Maker">
<meta property="og:site_name" content="mindclouds.com">
<meta property="og:image" content="https://www.mindclouds.com/pics/logo-fb-en.png">
<meta property="og:description" content="MindClouds.com is a free online Mind Mapping tool and Mind Map Maker. Create your own Mind Clouds or Mind Maps to visualize your ideas and to structure and organize your brainstorm. Start with a central concept and add nodes as associations with that central idea. Customize your Mind Cloud with icons, images, colors and text and save the result that you can edit later. You can finally save your Mind Map as an image.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mindclouds.com/?mindmapeditor">
<link rel="alternate" hreflang="en" href="https://www.mindclouds.com/?mindmapeditor">
<link rel="alternate" hreflang="en-gb" href="https://www.mindclouds.co.uk/?mindmapeditor">
<link rel="alternate" hreflang="nl" href="https://www.gedachtenwolk.nl/?mindmapeditor">
<link rel="alternate" hreflang="de" href="https://www.mindclouds.de/?mindmapeditor">
<link rel="alternate" hreflang="es" href="https://www.mindclouds.es/?mindmapeditor">
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "Zygomatic", "description": "Zygomatic is a publisher and developer of online games and websites.", "url": "https://www.zygomatic.com", "logo": "https://www.zygomatic.com/pics/logo-ldjson.png", "address": { "@type": "PostalAddress", "streetAddress": "Rigaweg 19", "addressLocality": "Amersfoort", "addressCountry": "NL", "postalCode": "3825 PP" }, "contactPoint": { "@type": "contactPoint", "contactType": "Customer Service", "email": "support@zygomatic.com", "telephone": "+31-683901055" }, "sameAs": [ "https://www.linkedin.com/company/zygomatic/", "https://x.com/zygomaticnl" ] } </script>
<link rel="stylesheet" href="/css/?v=1.2.1" type="text/css">
<script defer src="/js/?v=1.2.1"></script>
<script defer src="/js/?v=1.2.1&static"></script>
<!-- scripts -->
<script type="module" defer src="/js/script.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
//lib.shareSocials(document.body);
Page.init();
});
</script>
</head>
<body class="d-flex flex-column h-100">
<input type="file" accept=".mdmp" id="fileInput" class="d-none">
<div id="zygomaticBar"><div><a href="https://www.chartle.com" title="Online Chart and Graph maker" target="zygomatic"><i class="chartle"></i> <span>Chartle</span></a></div><div><a href="https://www.fakechatapp.com" title="Create fake chats" target="zygomatic"><i class="fakechatapp"></i> <span>Fake Chat App</span></a></div><div><a href="https://www.mapimage.com" title="Static map image generator" target="zygomatic"><i class="mapimage"></i> <span>Map Image</span></a></div><div><a href="https://www.maproute.com" title="Find and create routes" target="zygomatic"><i class="maproute"></i> <span>Map Route</span></a></div><div><a href="https://www.toonytool.com" title="Free Online Cartoon and Comic Strip Maker" target="zygomatic"><i class="toonytool"></i> <span>Toony Tool</span></a></div><div><a href="https://www.photofilters.com" title="Photo filters and image effects" target="zygomatic"><i class="photofilters"></i> <span>Photo Filters</span></a></div><div class="more"><i></i>More <span class="caret"></span><ul class="dropdownMenu"><li><a href="https://www.annotation.com" title="Annotate PDF documents, images, maps and screenshots" target="zygomatic"><i class="annotation"></i> Annotation</a></li><li><a href="https://www.phideo.com" title="Video Slideshow maker" target="zygomatic"><i class="phideo"></i> Phideo</a></li><li><a href="https://www.photoenlarger.com" title="Enlarge images and photos" target="zygomatic"><i class="photoenlarger"></i> Photo Enlarger</a></li><li><a href="https://www.youtubetrimmer.com" title="Trim and Crop Youtube videos" target="zygomatic"><i class="youtubetrimmer"></i> Youtube Trimmer</a></li><li><a href="https://www.wordclouds.com" title="Word cloud generator" target="zygomatic"><i class="wordcloud"></i> Word Clouds</a></li><li><a href="https://www.stripbackground.com" title="Remove backgrounds from images" target="zygomatic"><i class="stripbackground"></i> Strip Background</a></li><li><a href="https://www.postermaker.com" title="Online Poster maker, Online Poster and Flyer Designer" target="zygomatic"><i class="postermaker"></i> Poster Maker</a></li><li><a href="https://www.coloringonline.com" title="Online coloring books and pages" target="zygomatic"><i class="coloring"></i> Coloring Online</a></li><li><a href="https://www.photoresizer.com" title="Resize and Crop Photos" target="zygomatic"><i class="photoresizer"></i> Photo Resizer</a></li><li><a href="https://www.qrapp.com" title="QR code generator and scanner" target="zygomatic"><i class="qrapp"></i> QR App</a></li><li><a href="https://www.2img.com" title="In-browser (bulk) image conversion" target="zygomatic"><i class="twoimg"></i> Image conversion</a></li><li><a href="https://www.changefaces.com" title="Change the face on a photo and do a face swap" target="zygomatic"><i class="changefaces"></i> Change Faces</a></li><li><a href="https://www.photoeditor.com" title="Photo Editor Free Online" target="zygomatic"><i class="photoeditor"></i> Photo Editor</a></li><li><a href="https://www.photocollage.com" title="Photo Collage Maker" target="zygomatic"><i class="collage"></i> Photo Collage</a></li><li><a href="https://www.files2zip.com" title="Zip and unzip files online" target="zygomatic"><i class="files2zip"></i> Files2Zip</a></li><li><a href="https://www.2pdfconverter.com" title="Convert documents to PDF and PDF to other document formats" target="zygomatic"><i class="docconverter"></i> PDF converter</a></li><li><a href="https://tools.zygomatic.com/" title="Tools forum" target="zygomatic"><i class="zygotools"></i> Tools forum</a></li></ul></div></div>
<nav class="navbar navbar-dark bg-dark navbar-expand-md" id="headerNav">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="/pics/logo.png" title="Mindclouds">
<div class="siteName">Mindclouds.com</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav d-flex ms-auto">
<li id="langDropdown" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarLangDropdown" data-bs-toggle="dropdown">
<div class="flag us" title="en" style="margin-bottom:-4px"></div>
</a>
<div class="dropdown-menu" aria-labelledby="navbarLangDropdown" style="min-width:0"><a class="dropdown-item" href="https://www.mindclouds.co.uk/?mindmapeditor" title="Mindclouds.co.uk"><div class="flag en-gb" title="en-gb"></div></a><a class="dropdown-item" href="https://www.gedachtenwolk.nl/?mindmapeditor" title="Gedachtenwolk.nl"><div class="flag nl" title="nl"></div></a><a class="dropdown-item" href="https://www.mindclouds.de/?mindmapeditor" title="Mindclouds.de"><div class="flag de" title="de"></div></a><a class="dropdown-item" href="https://www.mindclouds.es/?mindmapeditor" title="Mindclouds.es"><div class="flag es" title="es"></div></a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/gallery/">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/contact/"><i class="bi bi-envelope-fill"></i> Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="https://paymentlink.mollie.com/payment/QBW7BC12sxeHjAFlL7pqy/" target="_blank"><i class="bi bi-cash-coin"></i> Donate</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="https://tools.zygomatic.com/c/mind-clouds-tool" target="_blank"><i class="bi bi-chat-dots"></i> Forum</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="banner top">
<!-- AdSense banner --><div class="adsbygoogle" style="display:inline-block;" data-ad-client="ca-pub-5029257013560698" data-ad-slot="8725304386"></div>
<!-- /AdSense banner --> </div>
</div>
<div id="introDiv" class="container-fluid ">
<div class="alert alert-success alert-dismissible fade show" role="alert">
<h1 class="fs-4">Online Mind Map Maker</h1>
<p>MindClouds.com is a free online Mind Mapping tool and Mind Map Maker. Create your own Mind Clouds or Mind Maps to visualize your ideas and to structure and organize your brainstorm. Start with a central concept and add nodes as associations with that central idea. Customize your Mind Cloud with icons, images, colors and text and save the result that you can edit later. You can finally save your Mind Map as an image.</p>
<button type="button" class="btn-close" aria-label="Close" onclick="document.querySelector('#introDiv').classList.add('seen')"></button>
</div>
</div>
<div class="container-fluid">
<nav id="menuBar" class="navbar navbar-expand">
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">File</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" id="exportButtonSd"><i class="bi bi-badge-sd-fill"></i> Save as image</a></li>
<li><a class="dropdown-item" href="#" id="exportButtonHd"><i class="bi bi-badge-hd-fill"></i> Save as image</a></li>
<li><a class="dropdown-item" href="#" id="shareButton"><i class="bi bi-share-fill"></i> Save/Share online</a></li>
<li><a class="dropdown-item" href="#" id="printButton"><i class="bi bi-printer-fill"></i> Print</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#" id="newCloudButton"><i class="bi bi-trash3-fill"></i> New mind cloud</a></li>
<!--<li><a class="dropdown-item" href="#" id="exampleCloudButton"><i class="bi bi-cloud-fill"></i> Example mind cloud</a></li>-->
<li><a class="dropdown-item" href="#" id="openButton"><i class="bi bi-cloud-arrow-up-fill"></i> Open (.mdmp)</a></li>
<li><a class="dropdown-item" href="#" id="saveButton"><i class="bi bi-file-earmark-arrow-down-fill"></i> Save (.mdmp)</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#offSize"><i class="bi bi-aspect-ratio-fill"></i> Image size </a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" data-bs-toggle="modal" href="#helpModal"><i class="bi bi-question-circle-fill"></i> Help</a></li>
<li><a class="dropdown-item" href="#" id="aboutButton"><i class="bi bi-info-circle-fill"></i> About</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="createButton" title="Add node"><i class="bi bi-node-plus-fill"></i> Add node</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Annotate</a>
<div class="dropdown-menu annotateMenu">
<div class="dropdown-item" data-task="brush"><i class="bi bi-brush"></i> Free draw</div>
<div class="dropdown-item" data-task="text"><i class="bi bi-type"></i> Text</div>
<div class="dropdown-item" data-task="shape,line"><i class="bi bi-slash-lg"></i> Line</div>
<div class="dropdown-item" data-task="shape,linearrow"><i class="bi bi-arrow-up-right"></i> Arrow</div>
<div class="dropdown-item" data-task="shape,rect"><i class="bi bi-square"></i> Rectangle</div>
<div class="dropdown-item" data-task="shape,ellipse"><i class="bi bi-circle"></i> Circle/ellipse</div>
<div class="dropdown-item" data-task="shape,triangle"><i class="bi bi-triangle"></i> Triangle</div>
<div class="dropdown-item" data-task="tooltip"><i class="bi bi-caret-down-fill"></i> Tooltip</div>
<div class="dropdown-item" data-task="postit"><i class="bi bi-sticky"></i> Post-it note</div>
<div class="dropdown-item" data-task="image"><i class="bi bi-image"></i> Image</div>
<div class="dropdown-item" data-task="icons"><i class="bi bi-emoji-astonished"></i> Icons</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Theme</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#themePicker"><i class="bi bi-palette2"></i> Pick theme</a></li>
<li><a class="dropdown-item" data-bs-toggle="offcanvas" href="#themeEditor"><i class="bi bi bi-palette-fill"></i> Properties</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="undoButton" title="Undo"><i class="bi bi-arrow-counterclockwise"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="redoButton" title="Redo"><i class="bi bi-arrow-clockwise"></i></a>
</li>
</ul>
</div>
</nav>
<div class="feToolbar">
<div class="toolMenu p-2"></div>
<div class="close" style="display:none"><i class="bi bi-x"></i></div>
</div>
<div class="content-area">
<canvas id="canvas"></canvas>
</div>
</div>
<div class="container-fluid mt-3">
<div class="shortcuts">
<div class="text-end"><span class="badge text-bg-dark">Esc</span></div>
<div>Cancel current operation</div>
<div class="text-end"><span class="badge text-bg-dark">[Ctrl] Z</span></div>
<div>Undo</div>
<div class="text-end"><span class="badge text-bg-dark">[Ctrl] Y</span></div>
<div>Redo</div>
<div class="text-end"><span class="badge text-bg-dark">◄ ▲ ▼ ►</span></div>
<div>Move object</div>
<div class="text-end text-nowrap"><span class="badge text-bg-dark">del</span> <span class="badge text-bg-dark"><i class="bi bi-backspace"></i></span></div>
<div>Delete object</div>
<div class="text-end"><span class="badge text-bg-dark">[Ctrl] C</span></div>
<div>Copy object</div>
<div class="text-end"><span class="badge text-bg-dark">[Ctrl] V</span></div>
<div>Paste object</div>
<div class="text-end"><span class="badge text-bg-dark">Double click node</span></div>
<div>Select & edit node text</div>
<div class="text-end"><span class="badge text-bg-dark">⇧ Double click node</span></div>
<div>Edit node text</div>
<div class="text-end"><span class="badge text-bg-dark">[Ctrl] S</span></div>
<div>Save mindmap as image</div>
<div class="text-end"><span class="badge text-bg-dark">F</span><span class="badge text-bg-dark">[SHIFT]-F</span></div>
<div>Bring forward / Bring to front</div>
<div class="text-end"><span class="badge text-bg-dark">B</span><span class="badge text-bg-dark">[SHIFT]-B</span></div>
<div>Send backwards / Send to back</div>
<div class="text-end"><span class="badge text-bg-dark">[SHIFT]-Click objects</span></div>
<div>Create or extend selection</div>
</div>
</div>
<div class="container-fluid">
<div class="banner bottom">
<!-- AdSense banner --><div class="adsbygoogle" style="display:inline-block;" data-ad-client="ca-pub-5029257013560698" data-ad-slot="7429422639"></div>
<!-- /AdSense banner --> </div>
</div>
<div class="context-menu" id="contextMenu">
<div class="context-item" id="contextNode" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Create subnode"><i class="bi bi-node-plus"></i></div>
<div class="context-item-wrap" id="contextClone">
<div class="context-item" id="contextCloneCopy" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copy..."><i class="bi bi-files"></i></div>
<div class="context-item-sub">
<div class="context-item" id="contextCloneSibling" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Copy at same level"><i class="bi bi-people"></i></div>
<div class="context-item" id="contextCloneChild" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Copy as subnode"><i class="bi bi-person-down"></i></div>
</div>
</div>
<div class="context-item" id="contextText" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Edit text"><i class="bi bi-input-cursor-text"></i></div>
<div class="context-item" id="contextLink" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="(Un)link nodes"><i class="bi bi-link"></i></div>
<div class="context-item" id="contextStyle" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Properties"><i class="bi bi-paint-bucket"></i></div>
<div class="context-item" id="contextDelete" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Delete node(s)"><i class="bi bi-trash3"></i></div>
</div>
<div class="offcanvas offcanvas-end update-state" tabindex="-1" id="nodeEditor">
<div class="offcanvas-header">
<h5 class="offcanvas-title"><i class="bi bi-diagram-2"></i> Node properties</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="tabs-header">
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" id="nodeTextTabButton" data-bs-toggle="tab" data-bs-target="#nodeTabText">Text</button>
</li>
<li class="nav-item">
<button class="nav-link" id="nodeStyleTabButton" data-bs-toggle="tab" data-bs-target="#nodeTabStyle">Style</button>
</li>
<li class="nav-item">
<button class="nav-link" id="nodeImageTabButton" data-bs-toggle="tab" data-bs-target="#nodeTabImage">Image</button>
</li>
<li class="nav-item">
<button class="nav-link" id="nodeIconTabButton" data-bs-toggle="tab" data-bs-target="#nodeTabIcon">Icon</button>
</li>
</ul>
</div>
<div class="offcanvas-body">
<div class="tab-content">
<div class="tab-pane show active" id="nodeTabText">
<div class="row" id="nodeFormGroupText"></div>
</div>
<div class="tab-pane" id="nodeTabStyle">
<div class="row" id="nodeFormGroupStyle"></div>
</div>
<div class="tab-pane" id="nodeTabImage">
<input type="file" id="uploadImageInput" accept="image/*" class="d-none">
<div class="upload-overlay" id="uploadImageOverlay">
<i class="bi bi-cloud-upload"></i>
</div>
<button class="btn btn-outline-primary w-100" id="uploadImageButton">
<i class="bi bi-cloud-upload fs-4"></i><br>
Drop an image or click to upload </button>
<div id="imageStyleControls">
<button class="btn btn-outline-danger w-100 mt-2" id="deleteImageButton">
<i class="bi bi-trash3-fill"></i> Delete image </button>
<div class="row mt-4" id="nodeFormGroupImage"></div>
</div>
</div>
<div class="tab-pane" id="nodeTabIcon">
<div style="margin:-16px;background:#fff;position:sticky;top:-16px;z-index:2" class="p-2 pb-0">
<div class="input-group">
<input type="radio" class="btn-check" name="icon-type" id="icon-type-flat" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="icon-type-flat">Flat</label>
<input type="radio" class="btn-check" name="icon-type" id="icon-type-line" autocomplete="off">
<label class="btn btn-outline-primary" for="icon-type-line">Line</label>
<select id="iconCats" class="form-select">
</select>
</div>
</div>
<div class="icons" id="iconsDiv">
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end update-state" tabindex="-1" id="offSize">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Image size</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<div class="mb-3">
<select class="form-select" id="sizePreset">
<option value="" selected disabled>- choose from preset -</option>
<optgroup label="4 : 3">
<option value="640x480">640 x 480</option>
<option value="800x600">800 x 600</option>
<option value="1024x768">1024 x 768</option>
</optgroup>
<optgroup label="3 : 4">
<option value="480x640">480 x 640</option>
<option value="600x800">600 x 800</option>
<option value="768x1024">768 x 1024</option>
</optgroup>
<optgroup label="1 : 1">
<option value="640x640">640 x 640</option>
<option value="800x800">800 x 800</option>
<option value="1024x1024">1024 x 1024</option>
</optgroup>
<optgroup label="16 : 9">
<option value="640x360">640 x 360</option>
<option value="800x450">800 x 450</option>
<option value="1024x576">1024 x 576</option>
</optgroup>
<optgroup label="9 : 16">
<option value="360x640">360 x 640</option>
<option value="450x800">450 x 800</option>
<option value="576x1024">576 x 1024</option>
</optgroup>
</select>
</div>
<div class="mb-3">
<label for="widthRange" class="form-label">Width</label>
<input type="range" class="form-range mb-1" id="widthRange" min="100" max="2000">
<input type="number" class="form-control" id="widthInput">
<div class="invalid-feedback d-none" id="widthFeedback">Please provide a width between 100 and 2000.</div>
</div>
<div class="mb-3">
<label for="heightRange" class="form-label">Height</label>
<input type="range" class="form-range mb-1" id="heightRange" min="100" max="2000">
<input type="number" class="form-control" id="heightInput">
<div class="invalid-feedback d-none" id="heightFeedback">Please provide a height between 100 and 2000.</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end update-state" tabindex="-1" id="themeEditor">
<div class="offcanvas-header">
<h5 class="offcanvas-title"><i class="bi bi bi-palette-fill"></i> Theme properties</h5>
<button type="submit" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="tabs-header">
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#themeTabGlobal">Canvas</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#themeTabLayer1">Layer 1</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#themeTabLayer2">Layer 2</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#themeTabLayer3">Layer 3</button>
</li>
</ul>
</div>
<div class="offcanvas-body">
<div class="tab-content">
<div class="tab-pane show active" id="themeTabGlobal"></div>
<div class="tab-pane" id="themeTabLayer1">
<div id="themeFormGroupLayer1" class="row"></div>
</div>
<div class="tab-pane" id="themeTabLayer2">
<div id="themeFormGroupLayer2" class="row"></div>
</div>
<div class="tab-pane" id="themeTabLayer3">
<div id="themeFormGroupLayer3" class="row"></div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end update-state" tabindex="-1" id="themePicker">
<div class="offcanvas-header">
<h5 class="offcanvas-title"><i class="bi bi-palette2"></i> Pick theme</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<div class="row gy-3 gx-3" id="themeList"></div>
</div>
</div>
<div class="offcanvas offcanvas-end update-state" tabindex="-1" id="shareSocial">
<div class="offcanvas-header">
<h5 class="offcanvas-title"><i class="bi bi-share-fill"></i> Save/Share online</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body"></div>
</div>
<div class="modal fade" tabindex="-1" id="helpModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-cloud-fill"></i> Help</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-2">
<h6>Images</h6>
<p>You can either drag and drop an image onto the canvas or use the <i class="bi bi-paint-bucket"></i> <u>style menu</u> to add an image.</p>
</div>
<div class="mb-2">
<h6>Linking</h6>
<p>Select exactly 2 nodes and press <i class="bi bi-link"></i> <u>(un)link nodes</u> on the context menu to create or break a link.</p>
</div>
<div class="mb-2">
<h6>Resizing</h6>
<p>
You can resize nodes by dragging their <i class="bi bi-bounding-box"></i> <u>handles</u>. Hold <kbd>Shift</kbd> to keep the node's shape square. Hold <kbd>Ctrl</kbd> to keep the node's optimal aspect ratio. </p>
</div>
<div>
<h6>Keyboard shortcuts</h6>
<div class="row">
<div class="col-md-4">
<div><kbd>Delete</kbd></div>
<div><kbd>Ctrl</kbd> + <kbd>Z</kbd></div>
<div><kbd>Ctrl</kbd> + <kbd>Y</kbd></div>
<div><kbd>Shift</kbd> + <i>(resize)</i></div>
<div><kbd>Ctrl</kbd> + <i>(resize)</i></div>
</div>
<div class="col-md-8">
<div>Delete node</div>
<div>Undo action</div>
<div>Redo action</div>
<div>Keep even width and height</div>
<div>Keep optimal aspect ratio</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="saveMDMPModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Save (.mdmp)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="saveName" class="form-label">File name</label>
<div class="input-group">
<input type="text" class="form-control" id="saveName" placeholder="mindmap">
<span class="input-group-text">.mdmp</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveMDMPButton">Save</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="exportModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi" id="exportIcon"></i> Save as image</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="exportName" class="form-label">File name</label>
<div class="input-group">
<input type="text" class="form-control" id="exportName" placeholder="mindmap">
<span class="input-group-text" id="exportExtension">.png</span>
</div>
</div>
<div class="mb-3">
<label for="exportFormat" class="form-label">File type</label>
<select id="exportFormat" class="form-select">
<option value="png">PNG</option>
<option value="jpg">JPG</option>
<option value="webp">WEBP</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="exportButton">Save</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" id="exportHDModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-badge-hd-fill"></i> Save as image </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary" id="exportButton">Save</button>-->
</div>
</div>
</div>
</div>
<footer class="mt-auto">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<ul class="nav justify-content-center justify-content-md-start">
<li class="nav-item">
<a class="nav-link" href="/privacy/">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about/">About us</a>
</li>
</ul>
</div>
<div class="socials col-md-2 d-flex align-items-center justify-content-center" style="gap:1em">
<a class="nav-link" data-social="twitter" title="Follow us on Twitter" href="#">
<i class="bi bi-twitter"></i>
</a>
<a class="nav-link" data-social="facebook" title="Like us on Facebook" href="#">
<i class="bi bi-facebook"></i>
</a>
<a class="nav-link" data-social="pinterest" title="Follow us on Instagram" href="#">
<i class="bi bi-pinterest"></i>
</a>
</div>
<div class="col-md-5 d-flex align-items-center justify-content-center justify-content-md-end">
<div class="text-md-start">
© 2025. Made with <i class="bi bi-heart-fill heart"></i> by <a href="https://www.zygomatic.nl" target="_blank">Zygomatic</a>.
</div>
</div>
</div>
</div>
</footer>
<div id="wait" class="overlay">
<svg><rect></rect></svg>
</div>
</body>
</html>