- Implement complete Mermaid.js integration for rich diagram rendering - Add diagram-slide.html layout with title, diagram, and notes slots - Create diagramProcessor.ts with async rendering and error handling - Add comprehensive SVG element support to HTML sanitizer - Implement async template rendering system for diagram processing - Add SlidePreview component with loading states for better UX - Support all major Mermaid diagram types (flowchart, sequence, gantt, pie, etc.) - Add dark theme integration with custom color scheme - Include diagram-specific styling and responsive design - Add diagram field editor with syntax highlighting styling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
23 lines
614 B
HTML
23 lines
614 B
HTML
<div class="slide layout-diagram-slide">
|
|
<h1 class="slot title-slot"
|
|
data-slot="title"
|
|
data-type="title"
|
|
data-placeholder="Diagram Title"
|
|
data-required>
|
|
{{title}}
|
|
</h1>
|
|
|
|
<div class="slot diagram-content"
|
|
data-slot="diagram"
|
|
data-type="diagram"
|
|
data-placeholder="Enter Mermaid diagram syntax here..."
|
|
data-multiline="true">{{diagram}}</div>
|
|
|
|
<div class="slot notes-content"
|
|
data-slot="notes"
|
|
data-type="text"
|
|
data-placeholder="Optional diagram explanation..."
|
|
data-multiline="true">
|
|
{{notes}}
|
|
</div>
|
|
</div> |