📘 Visor Dinámico de Documentación (.md Viewer)
Un espacio vivo para explicar, enseñar y documentar sin fricción. Escribe en Markdown y publícalo con diseño limpio, soporte de código, tablas y diagramas, todo con carga rápida y modo oscuro.
¿Qué resuelve?
- Velocidad para documentar: escribe en .md y listo—sin CMS, sin fricción.
- Lectura agradable: tipografías limpias, tablas nítidas y bloques de código resaltados.
- Contenido expresivo: diagramas con Mermaid, imágenes, listas de tareas y más.
- Seguro y ligero: renderizado server-side, assets minimizados, lazy-loading de imágenes.
Lo que puedes hacer
- Guías y tutoriales (paso a paso con imágenes).
- Manual técnico / funcional (diagramas de flujo, secuencias, arquitectura).
- Reportes con tablas y snippets de datos o comandos.
- FAQs y “How-To” para tu equipo o clientes.
Características (en corto)
- Markdown con tablas y código resaltado (highlight.js).
- Diagramas Mermaid (flujo, secuencias, Gantt) sin plugins extras.
- Modo oscuro, estilos coherentes y carga diferida de imágenes.
- Navegación por secciones y contenido fácil de escanear.
¿Por qué Markdown?
- Fácil de aprender, rápido de editar y portable.
- Funciona perfecto para equipo mixto (negocio + tech).
- Se integra con control de versiones, revisión por pares y despliegues simples.
EJEMPLOS DE USO
🖼️ Imágenes (embed simples)
Usa el contenedor listo para que se vean bien, con lazy y estilos responsivos:
<div class="img-holder">
<img src="/static/img/marduk/Markdown-mark.svg"
alt="Usuarios"
class="doc-img"
loading="lazy" decoding="async">
</div>
Ejemplo de imagen aplicada:
🧠 Diagramas Mermaid (ideas en minutos)
flowchart LR
A[Idea] --> B{¿Listo para publicar?}
B -- Sí --> C[Markdown Viewer]
B -- No --> D[Ajustar contenido]
💻 Bloques de código con highlight, bash, python, css, html, js, etc.
# Exportar inventario
curl -s https://api.tuservicio.com/export > inventario.csv
📊 Tablas legibles
| Equipo | Responsable | Estado |
|---|---|---|
| Laptop-7 | Ana Torres | Activo |
| Router-3 | J. Pérez | Mantenimiento |
Nota: este visor usa un set de estilos listo (modo oscuro, contenedores de imagen, botones de copiar código). Si necesitas variar el tema de diagramas o colores, se ajusta desde las configuraciones, sin tocar tu contenido.