Beispiel für einen reinen CSS3-Mindmap-Stil

<div Klasse="Hauptteil" id="Knoten1">
    <h1>Knoten1</h1>
    <div Klasse="einBody">
        <div Klasse="Hauptteil">
            <h1>Knoten2</h1>
            <div Klasse="einBody">
                <div Klasse="Hauptteil">
                    <h1>Knoten3</h1>
                    <div Klasse="einBody">
                        <div Klasse="Hauptteil">
                            <h1>Knoten4</h1>
                        </div>
                        <div Klasse="Hauptteil">
                            <h1>Knoten4</h1>
                        </div>
                        <div Klasse="Hauptteil">
                            <h1>Knoten4</h1>
                        </div>
                    </div>
                </div>
                <div Klasse="Hauptteil">
                    <h1>Knoten3</h1>
                </div>
                <div Klasse="Hauptteil">
                    <h1>Knoten3</h1>
                </div>
            </div>
        </div>
        <div Klasse="mainBody"><h1>Knoten2</h1></div>
        <div Klasse="mainBody"><h1>Knoten2</h1></div>
    </div>
</div>

.mainBody{
    Anzeige: -webkit-flex; /* Safari */
    Anzeige: Flex;
    Flex-Richtung: Reihe;
    Inhalt ausrichten: Flex-Start;
}
.sbody{

}
.einBody{
    Anzeige: -webkit-flex; /* Safari */
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: Abstand herum;
}
#Knoten1{
    /*Höhe: 200px;*/
    Rand oben: 100px;
    Rand links: 100px;
}
h1{
    Zeilenhöhe: 100 %;
    Anzeige: -webkit-flex; /* Safari */
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: zentriert;
}