Cómo hacer un diagtwig de flujo / diagtwig usando solo HTML y CSS

Necesito hacer un diagtwig realmente complicado para un sitio web, en el que la jerarquía será un poco desordenada: las flechas subirán y bajarán, a veces un elemento señalará varios otros, y algunas veces habrá varios elementos apuntando al mismo . Encontré este método , pero no permite más de un elemento primario para un elemento y, por lo tanto, no funcionará en este caso.

Tiene que hacerse en HTML / CSS, porque mi intención es agregar algo de Javascript para cambiar el contenido de los bloques dinámicamente.

Este es un ejemplo del nivel de complejidad que necesito lograr: gráfico

Es posible que desee echar un vistazo a esto

http://thecodeplayer.com/walkthrough/css3-family-tree

Otro que hay que buscar es el ejemplo de SpaceTree de “Nicolas Garcia Belmonte”, pero no una solución pura de CSS. Es compatible con IE y la mayoría de los navegadores. Definitivamente vale la pena intentarlo.