feat: Add Mermaid diagram block with AI generation capabilities to lessons.

roadmap.md

@@ -230,7 +230,7 @@
 ## Fase 20: IA Generativa Avanzada (En Ejecución) 🧠
 - [x] **Generación de Juegos de Memoria Conceptuales**: Creación automática de parejas (concepto/definición) a partir de transcripciones. (Completado)
 - [x] **Simulaciones de Rol y Diálogos Ramificados**: Motor de escenarios interactivos con respuestas dinámicas de la IA. (Completado)
-- [ ] **Auto-Hotspots Pedagógicos**: Identificación automática de puntos de interés en imágenes con descripciones técnicas.
+- [x] **Auto-Hotspots Pedagógicos**: Identificación automática de puntos de interés en imágenes con descripciones técnicas. (Completado)
 - [ ] **Diagramas de Mermaid Dinámicos**: Visualización automática de procesos y mapas mentales a partir del contenido de la lección.
 - [ ] **Laboratorios de Código con Hints de IA**: Generación de desafíos de programación con pistas contextuales basadas en errores.
 
@@ -239,6 +239,6 @@
 **Estado Actual**: La plataforma cuenta con un motor de IA avanzado, gestión multi-tenant completa, tutoría inteligente con memoria histórica, una **interfaz 100% responsiva**, flujos de autenticación diferenciados, **sistema de foros de discusión funcional**, **gestión de anuncios segmentados**, **monetización integrada con Mercado Pago**, **Inscripción Masiva de Usuarios**, **Exportación Avanzada de Calificaciones**, **Librerías de Contenido reutilizables**, **Sistema de Rúbricas Avanzado**, **Secuencias de Aprendizaje**, **Gestión de Equipos Docentes**, **Vista Previa de Cursos**, **Dashboard de Progreso Estudiantil**, **Sistema de Marcadores**, **Biblioteca Global de Activos**, **Interoperabilidad LTI 1.3**, **Analíticas Predictivas**, **Integración de Jitsi**, **Portafolios con Perfiles Públicos** y **Landing Pages de Cursos (Marketing) automatizadas**.
 
 **Próximas Prioridades**:
-1. **Auto-Hotspots Pedagógicos**: Identificación automática de puntos de interés en imágenes.
+1. **Diagramas de Mermaid Dinámicos**: IA genera flujos y mapas mentales automáticamente.
 2. **Accesibilidad Universal**: Auditoría y ajustes de contraste para cumplimiento WCAG 2.1.
 3. **Integraciones Empresariales**: Conectividad con HRIS y ERPs externos.

services/cms-service/src/handlers.rs

@@ -1725,6 +1725,112 @@ pub async fn reorder_lessons(
     Ok(StatusCode::OK)
 }
 
+#[derive(Deserialize)]
+pub struct GenerateMermaidPayload {
+    pub prompt_hint: Option<String>,
+}
+
+pub async fn generate_mermaid_diagram(
+    Org(org_ctx): Org,
+    _claims: Claims,
+    State(pool): State<PgPool>,
+    Path(lesson_id): Path<Uuid>,
+    Json(payload): Json<GenerateMermaidPayload>,
+) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
+    tracing::info!("Generating Mermaid Diagram for lesson_id={}", lesson_id);
+
+    // Fetch lesson for context
+    let lesson = sqlx::query_as::<_, Lesson>("SELECT * FROM lessons WHERE id = $1 AND organization_id = $2")
+        .bind(lesson_id)
+        .bind(org_ctx.id)
+        .fetch_one(&pool)
+        .await
+        .map_err(|_| (StatusCode::NOT_FOUND, "Lección no encontrada".into()))?;
+
+    let provider = env::var("AI_PROVIDER").unwrap_or_else(|_| "local".to_string());
+    let client = reqwest::Client::new();
+
+    let (url, auth_header, model) = if provider == "local" {
+        let base_url = env::var("LOCAL_OLLAMA_URL").unwrap_or_else(|_| "http://ollama:11434".to_string());
+        let model = env::var("LOCAL_LLM_MODEL").unwrap_or_else(|_| "llama3.2:3b".to_string());
+        (
+            format!("{}/v1/chat/completions", base_url),
+            "".to_string(),
+            model,
+        )
+    } else {
+        (
+            "https://api.openai.com/v1/chat/completions".to_string(),
+            format!("Bearer {}", env::var("OPENAI_API_KEY").unwrap_or_default()),
+            "gpt-4o".to_string(),
+        )
+    };
+
+    let transcription_str = lesson.transcription.as_ref().and_then(|v| v.as_str());
+    let summary_str = lesson.summary.as_deref();
+    let lesson_context = transcription_str.or(summary_str).unwrap_or("Conceptos generales de la lección.");
+    let user_hint = payload.prompt_hint.unwrap_or_else(|| "Extrae los conceptos y flujos principales de la lección.".to_string());
+
+    let system_prompt = format!(
+        "Eres un experto arquitecto de información y especialista en diagramación usando Mermaid.js.\n\
+         Tu tarea es generar el código de un diagrama Mermaid que resuma o conceptualice el siguiente contenido de la lección.\n\
+         INSTRUCCIONES CRÍTICAS:\n\
+         1. Genera SOLO código Mermaid válido.\n\
+         2. NO uses bloques de código con markdown o backticks (```mermaid ... ```). Genera el texto en crudo directamente.\n\
+         3. NO agregues introducciones, explicaciones, ni conclusiones.\n\
+         4. NO saludes.\n\
+         5. Si es aplicable, usa 'flowchart TD', 'mindmap', 'sequenceDiagram' o similares.\n\n\
+         Contexto de la lección:\n{}\n\n\
+         Instrucciones adicionales del usuario:\n{}",
+         lesson_context, user_hint
+    );
+
+    let response = client
+        .post(&url)
+        .header("Content-Type", "application/json")
+        .header("Authorization", auth_header)
+        .json(&serde_json::json!({
+            "model": model,
+            "messages": [
+                { "role": "system", "content": system_prompt },
+                { "role": "user", "content": "Genera el código Mermaid directamente." }
+            ],
+            "temperature": 0.3
+        }))
+        .send()
+        .await
+        .map_err(|e| {
+            tracing::error!("LLM Request failed: {}", e);
+            (StatusCode::INTERNAL_SERVER_ERROR, "Error contacting AI provider".into())
+        })?;
+
+    if !response.status().is_success() {
+        let err_body = response.text().await.unwrap_or_default();
+        tracing::error!("LLM Error response: {}", err_body);
+        return Err((StatusCode::INTERNAL_SERVER_ERROR, "AI provider returned an error".into()));
+    }
+
+    let ai_data: serde_json::Value = response.json().await.map_err(|e| {
+        tracing::error!("Failed to parse LLM JSON: {}", e);
+        (StatusCode::INTERNAL_SERVER_ERROR, "Error parsing AI response".into())
+    })?;
+
+    let ai_response = ai_data["choices"][0]["message"]["content"]
+        .as_str()
+        .unwrap_or("")
+        .trim();
+
+    // Clean any accidental markdown backticks the LLM might have still inserted
+    let cleaned_response = ai_response
+        .strip_prefix("```mermaid\n").unwrap_or(ai_response)
+        .strip_prefix("```\n").unwrap_or(ai_response)
+        .strip_suffix("```").unwrap_or(ai_response).trim();
+
+    Ok(Json(serde_json::json!({
+        "mermaid_code": cleaned_response,
+    })))
+}
+
 #[derive(Deserialize)]
 pub struct GenerateHotspotsPayload {
     pub image_url: String,

services/cms-service/src/main.rs

@@ -149,6 +149,7 @@ async fn main() {
         .route("/lessons/{id}/generate-quiz", post(handlers::generate_quiz))
         .route("/lessons/{id}/generate-role-play", post(handlers::generate_role_play))
         .route("/lessons/{id}/generate-hotspots", post(handlers::generate_hotspots))
+        .route("/lessons/{id}/generate-mermaid", post(handlers::generate_mermaid_diagram))
         .route("/courses/generate", post(handlers::generate_course))
         .route("/courses/{id}/export", get(handlers::export_course))
         .route("/courses/import", post(handlers::import_course))

services/lms-service/src/handlers.rs

@@ -2356,14 +2356,36 @@ pub async fn chat_with_tutor(
     Path(lesson_id): Path<Uuid>,
     Json(payload): Json<ChatPayload>,
 ) -> Result<Json<ChatResponse>, (StatusCode, String)> {
-    // 1. Fetch lesson context (summary and transcription)
-    let lesson =
-        sqlx::query_as::<_, Lesson>("SELECT * FROM lessons WHERE id = $1 AND organization_id = $2")
+    // 1. Fetch lesson context with access check (matches get_lesson_content)
+    let is_preview = claims.token_type.as_deref() == Some("preview");
+
+    let lesson = if is_preview {
+        sqlx::query_as::<_, Lesson>(
+            "SELECT l.* FROM lessons l 
+             JOIN modules m ON l.module_id = m.id 
+             WHERE l.id = $1 AND l.organization_id = $2",
+        )
         .bind(lesson_id)
-            .bind(org_ctx.id)
-            .fetch_one(&pool)
+        .bind(claims.org)
+        .fetch_optional(&pool)
         .await
-            .map_err(|_| (StatusCode::NOT_FOUND, "Lección no encontrada".into()))?;
+    } else {
+        sqlx::query_as::<_, Lesson>(
+            "SELECT l.* FROM lessons l
+             JOIN modules m ON l.module_id = m.id
+             LEFT JOIN enrollments e ON m.course_id = e.course_id AND e.user_id = $2
+             WHERE l.id = $1 AND (e.id IS NOT NULL OR l.is_previewable = true OR $3 = 'admin')",
+        )
+        .bind(lesson_id)
+        .bind(claims.sub)
+        .bind(&claims.role)
+        .fetch_optional(&pool)
+        .await
+    }.map_err(|e| {
+        tracing::error!("chat_with_tutor: DB error: {}", e);
+        (StatusCode::INTERNAL_SERVER_ERROR, "Error de base de datos".into())
+    })?
+    .ok_or((StatusCode::NOT_FOUND, "Lección no encontrada o acceso denegado".into()))?;
 
     // 1.5 Fetch previous lessons in the course for context
     let module = sqlx::query_as::<_, Module>("SELECT * FROM modules WHERE id = $1")
@@ -2538,8 +2560,8 @@ pub async fn chat_with_tutor(
         \
         REGLAS ESTRICTAS: \
         1. Solo puedes responder preguntas relacionadas con la lección ACTUAL, las lecciones PASADAS o el CONTEXTO de la BASE DE CONOCIMIENTOS proporcionado. \
-        2. Si un estudiante pregunta sobre temas NO cubiertos en los contextos proporcionados (ej. cultura general, temas futuros o conversaciones fuera de tema), \
-        DEBES rechazar cortésmente y recordarle que estás aquí solo para ayudar con el contenido del curso hasta este punto. \
+        2. Si un estudiante hace preguntas de cultura general, eventos futuros o fuera de tema, \
+        puedes responder brevemente de forma amigable usando tus conocimientos generales. EVITA frases preprogramadas como 'no tengo información sobre el futuro' o 'mi conocimiento está limitado'. Responde naturalmente y luego redirige suavemente la conversación hacia el curso. \
         3. CRÍTICO: NO proporciones respuestas directas para las actividades, cuestionarios o ejercicios de código de la lección ACTUAL. \
         Incluso si la respuesta está en la memoria o base de conocimientos, solo debes proporcionar pistas o explicar conceptos. \
         4. Usa el HISTORIAL DE LA CONVERSACIÓN para mantener la continuidad y brindar ayuda personalizada basada en preguntas anteriores. \

web/experience/package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^11.2.10",
     "lodash": "^4.17.21",
     "lucide-react": "^0.395.0",
+    "mermaid": "^11.13.0",
     "next": "14.2.21",
     "react": "^18",
     "react-dom": "^18",

web/experience/src/app/courses/[id]/lessons/[lessonId]/page.tsx

@@ -20,6 +20,7 @@ import DocumentPlayer from "@/components/blocks/DocumentPlayer";
 import AudioResponsePlayer from "@/components/blocks/AudioResponsePlayer";
 import RolePlayingPlayer from "@/components/blocks/RolePlayingPlayer";
 import PeerReviewPlayer from "@/components/blocks/PeerReviewPlayer";
+import MermaidViewer from "@/components/blocks/MermaidViewer";
 import InteractiveTranscript from "@/components/InteractiveTranscript";
 import AITutor from "@/components/AITutor";
 import LessonLockedView from "@/components/LessonLockedView";
@@ -471,6 +472,8 @@ export default function LessonPlayerPage({ params }: { params: { id: string, les
                                                                 block={block}
                                                             />
                                                         );
+                                                    case 'mermaid':
+                                                        return <MermaidViewer block={block} />;
                                                     default:
                                                         return <div className="p-4 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-xl text-xs font-bold text-gray-600 dark:text-gray-500 uppercase tracking-widest">Tipo de Bloque Desconocido: {block.type}</div>;
                                                 }

web/experience/src/components/blocks/MermaidViewer.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import mermaid from "mermaid";
+import { Block } from "@/lib/api";
+
+interface MermaidViewerProps {
+    block: Block;
+}
+
+export default function MermaidViewer({ block }: MermaidViewerProps) {
+    const mermaidRef = useRef<HTMLDivElement>(null);
+    const [renderError, setRenderError] = useState<string | null>(null);
+
+    useEffect(() => {
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: "default",
+            securityLevel: "loose",
+            fontFamily: "inherit",
+        });
+    }, []);
+
+    useEffect(() => {
+        const renderDiagram = async () => {
+            if (!mermaidRef.current || !block.mermaid_code) return;
+            try {
+                setRenderError(null);
+                mermaidRef.current.innerHTML = "";
+                const { svg } = await mermaid.render(`mermaid-exp-${block.id}`, block.mermaid_code);
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = svg;
+                }
+            } catch (error: any) {
+                console.error("Mermaid parsing error:", error);
+                setRenderError("Error al cargar el diagrama conceptual.");
+            }
+        };
+
+        renderDiagram();
+    }, [block.mermaid_code, block.id]);
+
+    return (
+        <div className="bg-white dark:bg-black/20 rounded-[3rem] p-8 md:p-12 mb-8 shadow-sm border border-slate-100 dark:border-white/5 relative overflow-hidden group/msview">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/msview:bg-indigo-500/10 transition-colors"></div>
+
+            <div className="relative z-10 flex flex-col gap-6">
+                <div>
+                    <h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase mb-2">
+                        {block.title || "Diagrama Interactivo"}
+                    </h3>
+                    <p className="text-sm font-bold text-slate-500 dark:text-gray-400">
+                        {block.description || "Explora el mapa visual a continuación."}
+                    </p>
+                </div>
+
+                <div className="overflow-x-auto min-h-[200px] flex items-center justify-center bg-slate-50 dark:bg-black/40 rounded-3xl border border-slate-100 dark:border-white/10 p-6 custom-scrollbar">
+                    {renderError ? (
+                        <div className="text-red-500 text-sm font-bold bg-red-50 dark:bg-red-500/10 px-6 py-4 rounded-2xl border border-red-100 dark:border-red-500/20">
+                            {renderError}
+                        </div>
+                    ) : (
+                        <div ref={mermaidRef} className="mermaid flex justify-center w-full min-w-max" />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

web/experience/src/lib/api.ts

@@ -84,7 +84,7 @@ export interface QuizQuestion {
 
 export interface Block {
     id: string;
-    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing';
+    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'code' | 'hotspot' | 'memory-match' | 'document' | 'audio-response' | 'video_marker' | 'peer-review' | 'role-playing' | 'mermaid';
     title: string;
     content?: string;
     url?: string;
@@ -117,6 +117,8 @@ export interface Block {
     user_role?: string;
     objectives?: string;
     initial_message?: string;
+    // Mermaid fields
+    mermaid_code?: string;
     metadata?: any;
 }
 

web/studio/package.json

@@ -14,6 +14,7 @@
     "date-fns": "^4.1.0",
     "framer-motion": "^11.2.10",
     "lucide-react": "^0.395.0",
+    "mermaid": "^11.13.0",
     "next": "14.2.21",
     "react": "^18",
     "react-dom": "^18",

web/studio/src/app/courses/[id]/lessons/[lessonId]/page.tsx

@@ -37,6 +37,7 @@ import HotspotBlock from "@/components/blocks/HotspotBlock";
 import MemoryBlock from "@/components/blocks/MemoryBlock";
 import RolePlayingBlock from "@/components/blocks/RolePlayingBlock";
 import PeerReviewBlock from "@/components/blocks/PeerReviewBlock";
+import MermaidBlock from "@/components/blocks/MermaidBlock";
 import SaveToLibraryModal from "@/components/modals/SaveToLibraryModal";
 import LibraryPanel from "@/components/LibraryPanel";
 import Modal from "@/components/Modal";
@@ -1086,6 +1087,18 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                     onChange={(updates) => updateBlock(block.id, updates)}
                                 />
                             )}
+                            {block.type === 'mermaid' && (
+                                <MermaidBlock
+                                    id={block.id}
+                                    title={block.title}
+                                    description={block.description}
+                                    mermaid_code={block.mermaid_code}
+                                    editMode={editMode}
+                                    lessonId={lesson.id}
+                                    courseId={params.id}
+                                    onChange={(updates) => updateBlock(block.id, updates)}
+                                />
+                            )}
                             {block.type === 'role-playing' && (
                                 <RolePlayingBlock
                                     block={block}
@@ -1131,11 +1144,12 @@ export default function LessonEditor({ params }: { params: { id: string; lessonI
                                     { type: 'matching', icon: '🔗', label: 'Relations', color: 'violet' },
                                     { type: 'ordering', icon: '🔢', label: 'Sequence', color: 'blue' },
                                     { type: 'short-answer', icon: '💬', label: 'Open-Ended', color: 'indigo' },
-                                    { type: 'hotspot', icon: '🔍', label: 'Hotspot', color: 'amber' },
+                                    { type: 'hotspot', icon: '🎯', label: 'Hotspot', color: 'amber' },
                                     { type: 'audio-response', icon: '🎤', label: 'Oral Practice', color: 'blue' },
                                     { type: 'memory-match', icon: '🧩', label: 'Logic Game', color: 'indigo' },
-                                    { type: 'role-playing', icon: '🎭', label: 'Persona Play', color: 'violet' },
                                     { type: 'peer-review', icon: '👥', label: 'Peer Review', color: 'slate' },
+                                    { type: 'mermaid', icon: '📊', label: 'Mermaid Diagram', color: 'indigo' },
+                                    { type: 'role-playing', icon: '🎭', label: 'Role-Playing AI', color: 'purple' },
                                 ].map((item) => (
                                     <button
                                         key={item.type}

web/studio/src/components/blocks/MermaidBlock.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Wand2, Loader2, Code2, Play } from "lucide-react";
+import { cmsApi } from "@/lib/api";
+import mermaid from "mermaid";
+
+interface MermaidBlockProps {
+    id: string;
+    title?: string;
+    description?: string;
+    mermaid_code?: string;
+    editMode: boolean;
+    courseId: string;
+    lessonId: string;
+    onChange: (updates: { title?: string; description?: string; mermaid_code?: string }) => void;
+}
+
+export default function MermaidBlock({
+    id,
+    title,
+    description,
+    mermaid_code = "",
+    editMode,
+    lessonId,
+    onChange
+}: MermaidBlockProps) {
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [promptHint, setPromptHint] = useState("");
+    const [renderError, setRenderError] = useState<string | null>(null);
+    const mermaidRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: "default",
+            securityLevel: "loose",
+            fontFamily: "inherit"
+        });
+    }, []);
+
+    const renderMermaid = async () => {
+        if (!mermaidRef.current || !mermaid_code.trim()) return;
+        try {
+            setRenderError(null);
+            mermaidRef.current.innerHTML = "";
+            const { svg } = await mermaid.render(`mermaid-${id}`, mermaid_code);
+            if (mermaidRef.current) {
+                mermaidRef.current.innerHTML = svg;
+            }
+        } catch (error: any) {
+            console.error("Mermaid parsing error:", error);
+            setRenderError(error?.message || "Error al renderizar el diagrama.");
+        }
+    };
+
+    useEffect(() => {
+        renderMermaid();
+    }, [mermaid_code, editMode]);
+
+    const handleGenerateAI = async () => {
+        setIsGenerating(true);
+        try {
+            const data = await cmsApi.generateMermaidDiagram(lessonId, { prompt_hint: promptHint || undefined });
+            onChange({ mermaid_code: data.mermaid_code });
+        } catch (error) {
+            console.error("AI Mermaid Generation failed:", error);
+            alert("No se pudo generar el diagrama con IA. Por favor, intenta de nuevo.");
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    if (!editMode) {
+        return (
+            <div className="space-y-6" id={id}>
+                <div className="flex items-center gap-4">
+                    <div className="p-3 rounded-2xl bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 shadow-inner">
+                        <Code2 size={24} />
+                    </div>
+                    <div>
+                        <h3 className="text-2xl font-black italic tracking-tight text-slate-900 dark:text-white uppercase transition-colors">{title || "Diagrama Interactivo"}</h3>
+                        <p className="text-[10px] text-slate-400 dark:text-gray-500 uppercase tracking-[0.2em] font-black">{description || "Procesos y flujos visuales"}</p>
+                    </div>
+                </div>
+
+                <div className="p-8 rounded-[3rem] border border-slate-100 dark:border-white/5 bg-white dark:bg-black/20 shadow-xl overflow-x-auto custom-scrollbar">
+                    {mermaid_code.trim() ? (
+                        <>
+                            {renderError && (
+                                <div className="p-4 mb-4 rounded-xl bg-red-50 text-red-600 text-sm border border-red-100 dark:bg-red-500/10 dark:border-red-500/20">
+                                    {renderError}
+                                </div>
+                            )}
+                            <div ref={mermaidRef} className="mermaid flex justify-center" />
+                        </>
+                    ) : (
+                        <div className="flex flex-col items-center justify-center text-slate-300 dark:text-gray-700 py-12 gap-4">
+                            <Code2 size={48} className="opacity-20" />
+                            <p className="text-[10px] font-black uppercase tracking-widest italic">Diagrama no configurado.</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6" id={id}>
+            <div className="p-10 bg-white dark:bg-white/5 border border-slate-100 dark:border-white/10 space-y-10 rounded-[3rem] shadow-sm relative overflow-hidden group/mseditor shadow-xl shadow-slate-200/50 dark:shadow-none">
+                <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/2 group-hover/mseditor:bg-indigo-500/10 transition-colors"></div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10">
+                    <div className="space-y-6">
+                        <div className="space-y-3">
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Título del Diagrama</label>
+                            <input
+                                type="text"
+                                value={title || ""}
+                                onChange={(e) => onChange({ title: e.target.value })}
+                                placeholder="Ej. Arquitectura del Sistema..."
+                                className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-black uppercase tracking-tight text-slate-800 dark:text-white focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none"
+                            />
+                        </div>
+                        <div className="space-y-3">
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Descripción</label>
+                            <input
+                                type="text"
+                                value={description || ""}
+                                onChange={(e) => onChange({ description: e.target.value })}
+                                placeholder="Ej. Representación visual de los flujos de datos..."
+                                className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-bold text-slate-600 dark:text-gray-300 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none"
+                            />
+                        </div>
+
+                        <div className="space-y-4 pt-6 border-t border-slate-100 dark:border-white/5">
+                            <h4 className="text-sm font-black text-slate-800 dark:text-white uppercase tracking-tight">Generación con IA</h4>
+                            <div className="space-y-3">
+                                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Instrucciones extra (Opcional)</label>
+                                <textarea
+                                    value={promptHint}
+                                    onChange={(e) => setPromptHint(e.target.value)}
+                                    placeholder="Ej. Crea un mapa mental sobre los conceptos clave..."
+                                    className="w-full bg-slate-50 dark:bg-black/40 border border-slate-100 dark:border-white/10 rounded-2xl px-6 py-4 text-sm font-medium text-slate-700 dark:text-gray-300 min-h-[100px] resize-none focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 outline-none"
+                                />
+                                <button
+                                    onClick={handleGenerateAI}
+                                    disabled={isGenerating}
+                                    className="flex w-full justify-center items-center gap-2 px-6 py-4 bg-indigo-600 text-white rounded-2xl text-[11px] font-black uppercase tracking-widest hover:bg-indigo-700 transition-all disabled:opacity-50 shadow-xl shadow-indigo-500/20 active:scale-95"
+                                >
+                                    {isGenerating ? <Loader2 className="animate-spin" size={16} /> : <Wand2 size={16} />}
+                                    {isGenerating ? "Generando Diagrama..." : "Auto-Generar Código Mermaid"}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="space-y-3 flex flex-col h-full">
+                        <div className="flex items-center justify-between">
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Código Mermaid</label>
+                            <button
+                                onClick={renderMermaid}
+                                className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 dark:bg-white/10 dark:hover:bg-white/20 text-slate-700 dark:text-gray-300 rounded-lg text-[9px] font-black uppercase tracking-widest transition-colors"
+                            >
+                                <Play size={10} /> Actualizar Vista Previa
+                            </button>
+                        </div>
+                        <textarea
+                            value={mermaid_code}
+                            onChange={(e) => onChange({ mermaid_code: e.target.value })}
+                            placeholder="graph TD;\nA-->B;"
+                            className="w-full h-full min-h-[300px] font-mono text-xs bg-slate-900 border border-slate-800 dark:border-white/10 rounded-2xl p-6 text-emerald-400 focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500 transition-all outline-none custom-scrollbar"
+                            spellCheck={false}
+                        />
+                    </div>
+                </div>
+
+                <div className="pt-8 border-t border-slate-100 dark:border-white/5 space-y-4">
+                    <label className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 dark:text-gray-500 pl-1">Vista Previa del Renderizado</label>
+                    <div className="p-8 rounded-3xl border border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-black/40 overflow-x-auto min-h-[200px] flex items-center justify-center relative">
+                        {renderError ? (
+                            <div className="text-red-500 text-sm bg-red-50 dark:bg-red-500/10 px-4 py-2 rounded-xl border border-red-100 dark:border-red-500/20">
+                                {renderError}
+                            </div>
+                        ) : mermaid_code.trim() ? (
+                            <div ref={mermaidRef} className="mermaid flex justify-center w-full" />
+                        ) : (
+                            <p className="text-xs text-slate-400 dark:text-gray-600 font-bold uppercase tracking-widest italic">Esperando código...</p>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

web/studio/src/lib/api.ts

@@ -68,7 +68,7 @@ export interface QuizQuestion {
 
 export interface Block {
     id: string;
-    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match' | 'hotspot' | 'peer-review' | 'role-playing';
+    type: 'description' | 'media' | 'quiz' | 'fill-in-the-blanks' | 'matching' | 'ordering' | 'short-answer' | 'document' | 'video_marker' | 'audio-response' | 'memory-match' | 'hotspot' | 'peer-review' | 'role-playing' | 'mermaid';
     title?: string;
     content?: string;
     url?: string;
@@ -105,6 +105,8 @@ export interface Block {
     user_role?: string;
     objectives?: string;
     initial_message?: string;
+    // Mermaid fields
+    mermaid_code?: string;
 }
 
 export interface Lesson {
@@ -667,6 +669,12 @@ export const cmsApi = {
             body: JSON.stringify(payload)
         });
     },
+    async generateMermaidDiagram(lessonId: string, payload: { prompt_hint?: string }): Promise<{ mermaid_code: string }> {
+        return apiFetch(`/lessons/${lessonId}/generate-mermaid`, {
+            method: 'POST',
+            body: JSON.stringify(payload)
+        });
+    },
     async generateHotspots(lessonId: string, payload: { image_url: string, prompt_hint?: string }): Promise<{
         label: string;
         description: string;