slideshare/public/themes/default/layouts/diagram-slide.html
Michael Mainguy 72cce3af0f Add Mermaid diagram support with dedicated diagram-slide layout
- 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>
2025-08-22 05:41:50 -05:00

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>