@slidev/cli 0.48.0-beta.3 → 0.48.0-beta.5

package/dist/cli.mjs

@@ -1,20 +1,20 @@
 import {
   createServer,
-  getAddonRoots,
-  getClientRoot,
-  getThemeRoots,
-  getUserRoot,
-  isPath,
+  getThemeMeta,
   parser,
+  resolveAddons,
   resolveOptions,
-  resolveThemeName,
+  resolveTheme
+} from "./chunk-CV7O37IO.mjs";
+import {
   version
-} from "./chunk-HESHEOWV.mjs";
-import "./chunk-JORVSTMS.mjs";
+} from "./chunk-U44GKKNH.mjs";
 import {
   loadSetups
-} from "./chunk-CTBVOVLQ.mjs";
-import "./chunk-DWXI5WEO.mjs";
+} from "./chunk-O6TYYGU6.mjs";
+import {
+  getRoots
+} from "./chunk-7HOZGSL4.mjs";
 import "./chunk-BXO7ZPPU.mjs";
 
 // node/cli.ts
@@ -26,12 +26,12 @@ import process from "node:process";
 import fs from "fs-extra";
 import openBrowser from "open";
 import yargs from "yargs";
-import prompts from "prompts";
 import { blue, bold, cyan, dim, gray, green, underline, yellow } from "kolorist";
 import isInstalledGlobally from "is-installed-globally";
 import equal from "fast-deep-equal";
 import { verifyConfig } from "@slidev/parser";
 import { injectPreparserExtensionLoader } from "@slidev/parser/fs";
+import { uniq } from "@antfu/utils";
 import { checkPort } from "get-port-please";
 var CONFIG_RESTART_FIELDS = [
   "highlighter",
@@ -40,20 +40,19 @@ var CONFIG_RESTART_FIELDS = [
   "fonts",
   "css",
   "mdc",
-  "editor"
+  "editor",
+  "theme"
 ];
 injectPreparserExtensionLoader(async (headmatter, filepath) => {
   const addons = headmatter?.addons ?? [];
-  const roots = (
-    /* uniq */
-    [
-      getUserRoot({}).userRoot,
-      ...await getAddonRoots(addons, ""),
-      await getClientRoot()
-    ]
-  );
+  const { clientRoot, userRoot } = await getRoots();
+  const roots = uniq([
+    clientRoot,
+    userRoot,
+    ...await resolveAddons(addons)
+  ]);
   const mergeArrays = (a, b) => a.concat(b);
-  return await loadSetups(roots, "preparser.ts", { filepath, headmatter }, [], mergeArrays);
+  return await loadSetups(clientRoot, roots, "preparser.ts", { filepath, headmatter }, [], mergeArrays);
 });
 var cli = yargs(process.argv.slice(2)).scriptName("slidev").usage("$0 [args]").version(version).strict().showHelpOnFail(false).alias("h", "help").alias("v", "version");
 cli.command(
@@ -95,20 +94,6 @@ cli.command(
     describe: "specify which IP addresses the server should listen on in remote mode"
   }).strict().help(),
   async ({ entry, theme, port: userPort, open, log, remote, tunnel, force, inspect, bind }) => {
-    if (!fs.existsSync(entry) && !entry.endsWith(".md"))
-      entry = `${entry}.md`;
-    if (!fs.existsSync(entry)) {
-      const { create } = await prompts({
-        name: "create",
-        type: "confirm",
-        initial: "Y",
-        message: `Entry file ${yellow(`"${entry}"`)} does not exist, do you want to create it?`
-      });
-      if (create)
-        await fs.copyFile(new URL("../template.md", import.meta.url), entry);
-      else
-        process.exit(0);
-    }
     let server;
     let port = 3030;
     let lastRemoteUrl;
@@ -135,14 +120,27 @@ cli.command(
           logLevel: log
         },
         {
-          async onDataReload(newData, data) {
-            if (!theme && await resolveThemeName(newData.config.theme) !== await resolveThemeName(data.config.theme)) {
+          async loadData() {
+            const { data: oldData, entry: entry2 } = options;
+            const loaded = await parser.load(options.userRoot, entry2);
+            const themeRaw = theme || loaded.headmatter.theme || "default";
+            if (options.themeRaw !== themeRaw) {
               console.log(yellow("\n  restarting on theme change\n"));
               initServer();
-            } else if (CONFIG_RESTART_FIELDS.some((i) => !equal(newData.config[i], data.config[i]))) {
+              return false;
+            }
+            const themeMeta = options.themeRoots[0] ? await getThemeMeta(themeRaw, options.themeRoots[0]) : void 0;
+            const newData = {
+              ...loaded,
+              themeMeta,
+              config: parser.resolveConfig(loaded.headmatter, themeMeta, entry2)
+            };
+            if (CONFIG_RESTART_FIELDS.some((i) => !equal(newData.config[i], oldData.config[i]))) {
               console.log(yellow("\n  restarting on config change\n"));
               initServer();
+              return false;
             }
+            return newData;
           }
         }
       );
@@ -273,7 +271,7 @@ cli.command(
   }).strict().help(),
   async (args) => {
     const { entry, theme, watch, base, download, out, inspect } = args;
-    const { build } = await import("./build-VKH7FQSN.mjs");
+    const { build } = await import("./build-C6G7F24X.mjs");
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme, inspect }, "build");
       if (download && !options.data.config.download)
@@ -313,23 +311,18 @@ cli.command(
         default: "theme"
       }),
       async ({ entry, dir, theme: themeInput }) => {
-        const { userRoot } = getUserRoot({ entry });
-        const data = await parser.load(userRoot, entry);
-        const theme = await resolveThemeName(themeInput || data.config.theme);
-        if (theme === "none") {
+        const roots = await getRoots();
+        const data = await parser.load(roots.userRoot, entry);
+        const themeRaw = themeInput || data.headmatter.theme || "default";
+        if (themeRaw === "none") {
           console.error('Cannot eject theme "none"');
           process.exit(1);
         }
-        if (isPath(theme)) {
+        if ("/.".includes(themeRaw[0]) || themeRaw[0] !== "@" && themeRaw.includes("/")) {
           console.error("Theme is already ejected");
           process.exit(1);
         }
-        const roots = await getThemeRoots(theme, entry);
-        if (!roots.length) {
-          console.error(`Could not find theme "${theme}"`);
-          process.exit(1);
-        }
-        const root = roots[0];
+        const [name, root] = await resolveTheme(themeRaw, entry);
         await fs.copy(root, path.resolve(dir), {
           filter: (i) => !/node_modules|.git/.test(path.relative(root, i))
         });
@@ -338,7 +331,7 @@ cli.command(
         firstSlide.frontmatter.theme = dirPath;
         parser.prettifySlide(firstSlide);
         await parser.save(data.entry);
-        console.log(`Theme "${theme}" ejected successfully to "${dirPath}"`);
+        console.log(`Theme "${name}" ejected successfully to "${dirPath}"`);
       }
     );
   },
@@ -353,7 +346,7 @@ cli.command(
   (args) => exportOptions(commonOptions(args)).strict().help(),
   async (args) => {
     const { entry, theme } = args;
-    const { exportSlides, getExportOptions } = await import("./export-MLH55TH5.mjs");
+    const { exportSlides, getExportOptions } = await import("./export-SM2ZATWB.mjs");
     const port = await findFreePort(12445);
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile, theme }, "export");
@@ -397,7 +390,7 @@ cli.command(
     output,
     timeout
   }) => {
-    const { exportNotes } = await import("./export-MLH55TH5.mjs");
+    const { exportNotes } = await import("./export-SM2ZATWB.mjs");
     const port = await findFreePort(12445);
     for (const entryFile of entry) {
       const options = await resolveOptions({ entry: entryFile }, "export");

package/dist/{export-MLH55TH5.mjs → export-SM2ZATWB.mjs}

@@ -1,7 +1,6 @@
 import {
-  packageExists,
-  resolveGlobalImportPath
-} from "./chunk-DWXI5WEO.mjs";
+  getRoots
+} from "./chunk-7HOZGSL4.mjs";
 import "./chunk-BXO7ZPPU.mjs";
 
 // node/export.ts
@@ -14,7 +13,7 @@ import { parseRangeString } from "@slidev/parser/core";
 import { outlinePdfFactory } from "@lillallol/outline-pdf";
 import * as pdfLib from "pdf-lib";
 import { PDFDocument } from "pdf-lib";
-import isInstalledGlobally from "is-installed-globally";
+import { resolve } from "mlly";
 function addToTree(tree, info, slideIndexes, level = 1) {
   const titleLevel = info.level;
   if (titleLevel && titleLevel > level && tree.length > 0) {
@@ -384,18 +383,27 @@ function getExportOptions(args, options, outDir, outFilename) {
   };
 }
 async function importPlaywright() {
-  if (await packageExists("playwright-chromium"))
-    return await import("playwright-chromium");
-  let globalPath = isInstalledGlobally ? await resolveGlobalImportPath("playwright-chromium") : void 0;
-  if (globalPath)
-    return await import(globalPath);
+  const { userRoot, userWorkspaceRoot } = await getRoots();
+  try {
+    return await import(await resolve("playwright-chromium", { url: userRoot }));
+  } catch {
+  }
+  if (userWorkspaceRoot !== userRoot) {
+    try {
+      return await import(await resolve("playwright-chromium", { url: userWorkspaceRoot }));
+    } catch {
+    }
+  }
   const { resolveGlobal } = await import("resolve-global");
   try {
-    globalPath = resolveGlobal("playwright-chromium");
+    const imported = await import(resolveGlobal("playwright-chromium"));
+    return imported.default ?? imported;
+  } catch {
+  }
+  try {
+    return await import("playwright-chromium");
   } catch {
   }
-  if (globalPath)
-    return await import(globalPath);
   throw new Error("The exporting for Slidev is powered by Playwright, please install it via `npm i -D playwright-chromium`");
 }
 export {

package/dist/index.d.mts

@@ -13,6 +13,14 @@ import { InlineConfig, Plugin } from 'vite';
 import * as fs from '@slidev/parser/fs';
 export { fs as parser };
 
+interface RootsInfo {
+    cliRoot: string;
+    clientRoot: string;
+    userRoot: string;
+    userPkgJson: Record<string, any>;
+    userWorkspaceRoot: string;
+}
+
 interface SlidevEntryOptions {
     /**
      * Markdown entry
@@ -28,26 +36,21 @@ interface SlidevEntryOptions {
      * Remote password
      */
     remote?: string;
-    /**
-     * Root path
-     *
-     * @default process.cwd()
-     */
-    userRoot?: string;
     /**
      * Enable inspect plugin
      */
     inspect?: boolean;
 }
-interface ResolvedSlidevOptions {
+interface ResolvedSlidevOptions extends RootsInfo {
     data: SlidevData;
     entry: string;
-    userRoot: string;
-    cliRoot: string;
-    clientRoot: string;
+    themeRaw: string;
     theme: string;
     themeRoots: string[];
     addonRoots: string[];
+    /**
+     * =`[...themeRoots, ...addonRoots, userRoot]` (`clientRoot` excluded)
+     */
     roots: string[];
     mode: 'dev' | 'build' | 'export';
     remote?: string;
@@ -64,19 +67,12 @@ interface SlidevPluginOptions extends SlidevEntryOptions {
     unocss?: VitePluginConfig;
 }
 interface SlidevServerOptions {
-    onDataReload?: (newData: SlidevData, data: SlidevData) => void;
+    /**
+     * @returns `false` if server should be restarted
+     */
+    loadData?: () => Promise<SlidevData | false>;
 }
-declare function getClientRoot(): Promise<string>;
-declare function getCLIRoot(): string;
-declare function isPath(name: string): boolean;
-declare function getThemeRoots(name: string, entry: string): Promise<string[]>;
-declare function getAddonRoots(addons: string[], entry: string): Promise<string[]>;
-declare function getRoot(name: string, entry: string): Promise<string>;
-declare function getUserRoot(options: SlidevEntryOptions): {
-    entry: string;
-    userRoot: string;
-};
-declare function resolveOptions(options: SlidevEntryOptions, mode: ResolvedSlidevOptions['mode'], promptForInstallation?: boolean): Promise<ResolvedSlidevOptions>;
+declare function resolveOptions(options: SlidevEntryOptions, mode: ResolvedSlidevOptions['mode']): Promise<ResolvedSlidevOptions>;
 
 declare module 'vite' {
     interface UserConfig {
@@ -93,4 +89,4 @@ declare function createServer(options: ResolvedSlidevOptions, viteConfig?: Inlin
 
 declare function ViteSlidevPlugin(options: ResolvedSlidevOptions, pluginOptions: SlidevPluginOptions, serverOptions?: SlidevServerOptions): Promise<Plugin[]>;
 
-export { type ResolvedSlidevOptions, type SlidevEntryOptions, type SlidevPluginOptions, type SlidevServerOptions, ViteSlidevPlugin, createServer, getAddonRoots, getCLIRoot, getClientRoot, getRoot, getThemeRoots, getUserRoot, isPath, resolveOptions };
+export { type ResolvedSlidevOptions, type SlidevEntryOptions, type SlidevPluginOptions, type SlidevServerOptions, ViteSlidevPlugin, createServer, resolveOptions };

package/dist/index.mjs

@@ -1,31 +1,17 @@
 import {
   createServer,
-  getAddonRoots,
-  getCLIRoot,
-  getClientRoot,
-  getRoot,
-  getThemeRoots,
-  getUserRoot,
-  isPath,
   parser,
   resolveOptions
-} from "./chunk-HESHEOWV.mjs";
+} from "./chunk-CV7O37IO.mjs";
 import {
   ViteSlidevPlugin
-} from "./chunk-JORVSTMS.mjs";
-import "./chunk-CTBVOVLQ.mjs";
-import "./chunk-DWXI5WEO.mjs";
+} from "./chunk-U44GKKNH.mjs";
+import "./chunk-O6TYYGU6.mjs";
+import "./chunk-7HOZGSL4.mjs";
 import "./chunk-BXO7ZPPU.mjs";
 export {
   ViteSlidevPlugin,
   createServer,
-  getAddonRoots,
-  getCLIRoot,
-  getClientRoot,
-  getRoot,
-  getThemeRoots,
-  getUserRoot,
-  isPath,
   parser,
   resolveOptions
 };

package/dist/{unocss-6IVIFJMZ.mjs → unocss-XALM635U.mjs}

@@ -1,6 +1,6 @@
 import {
   loadSetups
-} from "./chunk-CTBVOVLQ.mjs";
+} from "./chunk-O6TYYGU6.mjs";
 import "./chunk-BXO7ZPPU.mjs";
 
 // node/plugins/unocss.ts
@@ -11,7 +11,7 @@ import { uniq } from "@antfu/utils";
 import { mergeConfigs } from "unocss";
 import jiti from "jiti";
 import UnoCSS from "unocss/vite";
-async function createUnocssPlugin({ themeRoots, addonRoots, clientRoot, roots, userRoot, data }, { unocss: unoOptions = {} }) {
+async function createUnocssPlugin({ themeRoots, addonRoots, clientRoot, roots, data, userRoot }, { unocss: unoOptions = {} }) {
   const configFiles = uniq([
     resolve(userRoot, "uno.config.ts"),
     resolve(userRoot, "unocss.config.ts"),
@@ -29,7 +29,7 @@ async function createUnocssPlugin({ themeRoots, addonRoots, clientRoot, roots, u
   }).filter(Boolean);
   configs.reverse();
   let config = mergeConfigs([...configs, unoOptions]);
-  config = await loadSetups(roots, "unocss.ts", {}, config, (a, b) => mergeConfigs([a, b]));
+  config = await loadSetups(clientRoot, roots, "unocss.ts", {}, config, (a, b) => mergeConfigs([a, b]));
   config.theme ||= {};
   config.theme.fontFamily ||= {};
   config.theme.fontFamily.sans ||= data.config.fonts.sans.join(",");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/cli",
-  "version": "0.48.0-beta.3",
+  "version": "0.48.0-beta.5",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -47,9 +47,9 @@
     "@iconify-json/ph": "^1.1.11",
     "@lillallol/outline-pdf": "^4.0.0",
     "@mrdrogdrog/optional": "^1.2.1",
-    "@shikijs/markdown-it": "^1.1.5",
-    "@shikijs/twoslash": "^1.1.5",
-    "@shikijs/vitepress-twoslash": "^1.1.5",
+    "@shikijs/markdown-it": "^1.1.6",
+    "@shikijs/twoslash": "^1.1.6",
+    "@shikijs/vitepress-twoslash": "^1.1.6",
     "@unocss/extractor-mdc": "^0.58.5",
     "@unocss/reset": "^0.58.5",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -76,7 +76,7 @@
     "markdown-it-mdc": "^0.2.3",
     "mlly": "^1.5.0",
     "monaco-editor": "^0.37.1",
-    "nanoid": "^5.0.5",
+    "nanoid": "^5.0.6",
     "open": "^10.0.3",
     "pdf-lib": "^1.17.1",
     "plantuml-encoder": "^1.4.0",
@@ -87,7 +87,7 @@
     "resolve": "^1.22.8",
     "resolve-from": "^5.0.0",
     "resolve-global": "^2.0.0",
-    "shiki": "^1.1.5",
+    "shiki": "^1.1.6",
     "sirv": "^2.0.4",
     "typescript": "^5.3.3",
     "unocss": "^0.58.5",
@@ -104,9 +104,9 @@
     "vitefu": "^0.2.5",
     "vue": "^3.4.19",
     "yargs": "^17.7.2",
-    "@slidev/client": "0.48.0-beta.3",
-    "@slidev/parser": "0.48.0-beta.3",
-    "@slidev/types": "0.48.0-beta.3"
+    "@slidev/client": "0.48.0-beta.5",
+    "@slidev/parser": "0.48.0-beta.5",
+    "@slidev/types": "0.48.0-beta.5"
   },
   "devDependencies": {
     "@hedgedoc/markdown-it-plugins": "^2.1.4",

package/template.md

@@ -14,6 +14,9 @@ info: |
   Presentation slides for developers.
 
   Learn more at [Sli.dev](https://sli.dev)
+transition: slide-left
+title: Welcome to Slidev
+mdc: true
 ---
 
 # Welcome to Slidev
@@ -21,20 +24,27 @@ info: |
 Presentation slides for developers
 
 <div class="pt-12">
-  <span @click="$slidev.nav.next" class="px-2 p-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
+  <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
     Press Space for next page <carbon:arrow-right class="inline"/>
   </span>
 </div>
 
-<a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
-  class="abs-br m-6 text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
-  <carbon-logo-github />
-</a>
+<div class="abs-br m-6 flex gap-2">
+  <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
+    <carbon:edit />
+  </button>
+  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
+    class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
+    <carbon-logo-github />
+  </a>
+</div>
 
 <!--
 The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
 -->
 
+---
+transition: fade-out
 ---
 
 # What is Slidev?
@@ -71,6 +81,25 @@ h1 {
 }
 </style>
 
+<!--
+Here is another comment.
+-->
+
+---
+layout: default
+---
+
+# Table of contents
+
+```html
+<Toc minDepth="1" maxDepth="1"></Toc>
+```
+
+<Toc maxDepth="1"></Toc>
+
+---
+transition: slide-up
+level: 2
 ---
 
 # Navigation
@@ -82,7 +111,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
 |     |     |
 | --- | --- |
 | <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide |
-| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd>| previous animation or slide |
+| <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
 | <kbd>up</kbd> | previous slide |
 | <kbd>down</kbd> | next slide |
 
@@ -102,26 +131,41 @@ image: https://source.unsplash.com/collection/94734566/1920x1080
 
 # Code
 
-Use code snippets and get the highlighting directly!
+Use code snippets and get the highlighting directly, and even types hover![^1]
 
-<!-- https://sli.dev/guide/syntax.html#line-highlighting -->
+```ts {all|5|7|7-8|10|all} twoslash
+// TwoSlash enables TypeScript hover information
+// and errors in markdown code blocks
+// More at https://shiki.style/packages/twoslash
 
-```ts {all|2|1-6|9|all}
-interface User {
-  id: number
-  firstName: string
-  lastName: string
-  role: string
-}
+import { computed, ref } from 'vue'
 
-function updateUser(id: number, update: User) {
-  const user = getUser(id)
-  const newUser = { ...user, ...update }
-  saveUser(id, newUser)
-}
+const count = ref(0)
+const doubled = computed(() => count.value * 2)
+
+doubled.value = 2
 ```
 
-<arrow v-click="[3, 4]" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
+
+<!-- This allow you to embed external code blocks -->
+<!-- <<< @/snippets/external.ts#snippet -->
+
+<!-- Footer -->
+[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
+
+<!-- Inline style -->
+<style>
+.footnotes-sep {
+  @apply mt-5 opacity-10;
+}
+.footnotes {
+  @apply text-sm opacity-75;
+}
+.footnote-backref {
+  display: none;
+}
+</style>
 
 ---
 
@@ -155,13 +199,23 @@ Check out [the guides](https://sli.dev/builtin/components.html) for more.
 </div>
 </div>
 
+<!--
+Presenter note with **bold**, *italic*, and ~~striked~~ text.
+
+Also, HTML elements are valid:
+<div class="flex w-full">
+  <span style="flex-grow: 1;">Left content</span>
+  <span>Right content</span>
+</div>
+-->
+
 ---
 class: px-20
 ---
 
 # Themes
 
-Slidev comes with powerful theming support. Themes are able to provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
+Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter:
 
 <div grid="~ cols-2 gap-2" m="t-2">
 
@@ -276,7 +330,7 @@ LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
 Inline $\sqrt{3x-1}+(1+x)^2$
 
 Block
-$$
+$$ {1|3|all}
 \begin{array}{c}
 
 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
@@ -299,9 +353,9 @@ $$
 
 You can create diagrams / graphs from textual descriptions, directly in your Markdown.
 
-<div class="grid grid-cols-2 gap-4 pt-4 -mb-6">
+<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
 
-```mermaid {scale: 0.9}
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
@@ -314,6 +368,59 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```
 
+```mermaid
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectivness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+```
+
+```plantuml {scale: 0.7}
+@startuml
+
+package "Some Group" {
+  HTTP - [First Component]
+  [Another Component]
+}
+
+node "Other Groups" {
+  FTP - [Second Component]
+  [First Component] --> FTP
+}
+
+cloud {
+  [Example 1]
+}
+
+database "MySql" {
+  folder "This is my folder" {
+    [Folder 3]
+  }
+  frame "Foo" {
+    [Frame 4]
+  }
+}
+
+[Another Component] --> [Example 1]
+[Example 1] --> [Folder 3]
+[Folder 3] --> [Frame 4]
+
+@enduml
+```
+
 </div>
 
 [Learn More](https://sli.dev/guide/syntax.html#diagrams)
@@ -325,4 +432,4 @@ class: text-center
 
 # Learn More
 
-[Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
+[Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)