Native LikeC4 Diagram Integration

[waewoo]

Hi Slidev Team,

This is a feature request to integrate native support for LikeC4 (likec4.dev) diagrams within Slidev presentations.

Problem

LikeC4 allows defining software architecture using a DSL and compiling it into multiple views . Currently, integrating these views into Slidev requires exporting static images. This workflow breaks the live, code-based approach that Slidev excels at and makes updates cumbersome.

Proposed Solution

Integrate LikeC4 rendering directly into Slidev, leveraging Slidev's extensibility and LikeC4's tooling. Potential approaches, informed by Slidev's documentation and LikeC4's capabilities, could include:

• Via Vite Plugin: Leverage the likec4/vite-plugin (potentially configured via vite.config.ts or ./setup/vite-plugins.ts ) for seamless HMR and component generation within Slidev's Vite environment.

• Via Markdown Transformer: Use Slidev's transformer system (./setup/transformers.ts ) to process likec4 ... code blocks, parsing the LikeC4 DSL and rendering specific views using LikeC4's API or renderer.

• Via Custom Component using Web Components: Utilize the Web Components generated by likec4 codegen webcomponent within a custom Slidev Vue component (./components/MyLikeC4.vue ) for embedding rendered views (e.g., <likec4-view view-id="..."> ).

• Packaged as an Addon: This integration could be bundled as a Slidev Addon (slidev-addon-likec4) for easy installation and configuration by users.

Benefits

• Enables true "architecture-as-code" directly within presentations .
• Streamlines workflow for developers using both Slidev and LikeC4.
• Keeps diagrams synchronised with the model ("single source of truth" ).
• Enhances Slidev's capabilities for technical documentation and talks .

Thank you for considering this integration.

Best regards,