El Diagrama de Documentos muestra cada uno de los documentos que genera el armazón para crear las páginas Web.

El Diagrama de Documentos (Diagrama 4) nos presenta la relación entre documentos, como se transforman de un documento a otro.

En las siguientes notas describo con un ejemplo cada tipo de documento, pero antes situémoslos en los dos grandes niveles de transformaciones:
Nivel 1.- Presentación : A partir del documento de contenidos se transforma en un documento de Estilo es decir se ensamblan los componentes de estilo (hojas de estilo, scripts cliente, cabeceras, pie, menús) y se genera un formato de presentación del contenido. Según el armazón de XSL que elijamos para realizar la transformación podemos convertir el documento de contenidos en un WML (web para teléfonos móviles), HTML, XML o PDF (formato de presentación de Adobe).
Nivel 2.- Programación : Este segundo nivel solo es aplicado a las páginas Web dinámicas y para que obtengamos el código Fuente es necesario realizar 2 transformaciones:
Nivel 2.1.- Transformación a XSP : Para tener el Código Fuente primero hay que generar un documento intermedio, el XSP. Por que al transformar el documento de Estilo a XSP es cuando se establecen las relaciones entre el código de programación y el documento.
Nivel 2.2.- Transformación a Código Fuente : A partir de la estructura del documento XSP es fácil generar el código fuente.