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

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;
 }