純粋な CSS3 マインドマップ スタイルの例

<div class="mainBody" id="node1">
    <h1>ノード1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>ノード2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>ノード3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>ノード3</h1>
                </div>
                <div class="mainBody">
                    <h1>ノード3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>ノード2</h1></div>
        <div class="mainBody"><h1>ノード2</h1></div>
    </div>
</div>

.mainBody{
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの配置: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースを空ける;
}
#ノード1{
    /*高さ: 200px;*/
    上マージン: 100px;
    左マージン: 100px;
}
h1{
    行の高さ: 100%;
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
}