---
canonical_url: "https://vignettes.io"
---
<u-page-hero :ui="{"container":"pb-10 sm:pb-12 lg:pb-16"}">
<template v-slot:title="">

Vos présentations en Markdown

</template>

<template v-slot:description="">

Vous écrivez le texte, Vignettes le met en page aux couleurs de votre équipe.

</template>

<template v-slot:links="">
<u-button to="https://vignettes.io/docs/demarrer/premiere-presentation" trailing-icon="i-lucide-arrow-right" size="xl">

Écrire une première présentation

</u-button>

<u-button to="https://vignettes.io/docs" color="neutral" variant="outline" size="xl">

Lire la documentation

</u-button>
</template>
</u-page-hero>

<u-container>
<span className="block,mb-3,text-sm,text-muted">

Modifiez le texte : la diapositive suit votre curseur.

</span>



<deck-playground>

```mdc
---
title: Bilan du trimestre
theme: dsfr
---

### Le parcours en trois étapes

:::Scheme{:fragments="false"}
::Step{n="1" picto="document/document-add" title="Dépôt"}
L'usager remplit le formulaire.
::
::Step{n="2" picto="digital/in-progress" title="Instruction"}
Un agent vérifie les pièces.
::
::Step{n="3" picto="digital/mail-send" title="Réponse"}
L'usager reçoit un message.
::
:::

---

### La suite

:::Columns
::Column
#### Ce mois-ci
Les tests avec cinq usagers.
::

::Column
#### Le mois prochain
L'affichage sur téléphone.
::
:::

::Notes
Donner le nombre de demandes reçues.
::
```

</deck-playground>
</u-container>

<u-page-section :ui="{"container":"py-12 sm:py-16 lg:py-20"}" headline="Écrire" orientation="horizontal">
<template v-slot:title="">

Le Markdown que vous connaissez

</template>

<template v-slot:description="">

Un titre commence une diapositive. Pour des colonnes, une citation, des étapes ou un diagramme, vous ajoutez un composant par son nom.

</template>

<template v-slot:features="">
<u-page-feature description="Les éléments d'une liste apparaissent un à un, à chaque appui sur la flèche." icon="i-lucide-list-checks" title="Point par point">



</u-page-feature>

<u-page-feature description="Étapes illustrées, cartes reliées par des flèches, diagrammes Mermaid." icon="i-lucide-workflow" title="Des schémas écrits en texte">



</u-page-feature>

<u-page-feature description="Une diapositive affiche un composant de votre Storybook, rendu en direct." icon="i-lucide-monitor-smartphone" title="Stories Storybook">



</u-page-feature>
</template>

<template v-slot:links="">
<u-button to="https://vignettes.io/docs/ecrire/composants" color="neutral" trailing-icon="i-lucide-arrow-right" variant="subtle">

Les composants

</u-button>
</template>

<deck-example :hide-source="true">

```mdc
---
theme: dsfr
---

### Le circuit d'une demande

:::Diagram{layout="grid" cols="3" rows="2" :fragments="false"}
::Area{at="2,1" span="2,1" title="Le service" color="purple"}
::
::Node{id="depot" at="1,1" picto="document/contract" title="Dépôt" color="green"}
::
::Node{id="instruction" at="2,1" picto="digital/data-visualization" title="Instruction" :emphasis="true"}
Une étape par agent
::
::Node{id="reponse" at="3,1" picto="digital/application" title="Réponse" :planned="true"}
::
::Node{id="pieces" at="1,2" title="Pièces" variant="flow"}
::
::Edge{from="depot" to="instruction" label="transmet"}
::
::Edge{from="instruction" to="reponse" :dashed="true"}
::
:::
```

</deck-example>
</u-page-section>

<u-page-section :ui="{"container":"py-12 sm:py-16 lg:py-20"}" headline="Présenter">
<template v-slot:title="">

Présentez depuis votre navigateur

</template>

<template v-slot:description="">

Un lien ouvre la présentation, sur un ordinateur comme sur un téléphone. Vous présentez avec vos notes, puis vous envoyez le PDF ou le texte.

</template>

<template v-slot:features="">
<u-page-feature description="La diapositive suivante, un chronomètre et vos notes, dans une seconde fenêtre." icon="i-lucide-presentation" title="Vue conférencier" to="https://vignettes.io/docs/ecrire/presenter#la-vue-conférencier">



</u-page-feature>

<u-page-feature description="Chaque diapositive sur une page, dans un fichier à joindre à un courriel." icon="i-lucide-file-down" title="Export PDF" to="https://vignettes.io/docs/ecrire/presenter#exporter-en-pdf">



</u-page-feature>

<u-page-feature description="Vous téléchargez le Markdown du brouillon ou de la version publiée, pour le garder ou le faire modifier par un agent." icon="i-lucide-file-text" title="Le Markdown à télécharger" to="https://vignettes.io/docs/ecrire/presenter#télécharger-le-texte">



</u-page-feature>
</template>
</u-page-section>

<u-page-section :ui="{"container":"py-12 sm:py-16 lg:py-20","wrapper":"order-first lg:order-last"}" headline="Thèmes" orientation="horizontal" :reverse="true">
<template v-slot:title="">

Aux couleurs de votre équipe

</template>

<template v-slot:description="">

Le thème du Système de design de l'État est fourni. Pour votre équipe, vous écrivez un thème avec ses couleurs et sa police, puis vous le choisissez par une ligne de l'en-tête de la présentation.

</template>

<template v-slot:links="">
<u-button to="https://vignettes.io/docs/themes/theme-de-votre-equipe" color="neutral" trailing-icon="i-lucide-arrow-right" variant="subtle">

Écrire votre thème

</u-button>
</template>

<deck-example :hide-source="true">

```mdc
---
theme: dsfr
syntax:
  split: heading
---

## Les résultats du trimestre

Trois indicateurs suivis chaque mois par l'équipe.
```

</deck-example>
</u-page-section>

<u-page-section :ui="{"container":"py-12 sm:py-16 lg:py-20"}" headline="Studio">
<template v-slot:title="">

À plusieurs, de l'écriture à la présentation

</template>

<template v-slot:description="">

Le studio range les présentations par projet. Vous y écrivez avec vos collègues, vous publiez une version, vous choisissez qui peut la lire, puis vous présentez.

</template>

<template v-slot:features="">
<u-page-feature description="Plusieurs personnes modifient la même présentation en même temps." icon="i-lucide-users" title="Un brouillon partagé" to="https://vignettes.io/docs/studio/versions-et-brouillon">



</u-page-feature>

<u-page-feature description="Les visiteurs voient la dernière version publiée, et l'historique garde les précédentes." icon="i-lucide-history" title="Des versions publiées" to="https://vignettes.io/docs/studio/versions-et-brouillon">



</u-page-feature>

<u-page-feature description="Publique, privée ou protégée par un mot de passe, et partagée avec un compte GitHub ou Google." icon="i-lucide-lock-keyhole" title="Un accès par présentation" to="https://vignettes.io/docs/studio/roles-et-partage">



</u-page-feature>
</template>
</u-page-section>

<u-page-section :ui="{"container":"py-12 sm:py-16 lg:py-20"}" headline="Agents" orientation="horizontal">
<template v-slot:title="">

Demandez la présentation à votre agent de code

</template>

<template v-slot:description="">

Une skill donne à votre agent les règles du format. Depuis le dépôt de votre produit, il lit le code et la documentation, puis il écrit le fichier que vous importez dans le studio.

</template>

<template v-slot:links="">
<u-button to="https://vignettes.io/docs/ecrire/ecrire-avec-un-agent" color="neutral" trailing-icon="i-lucide-arrow-right" variant="subtle">

Installer la skill

</u-button>
</template>

```text
/plugin install vignettes-decks@vignettes

Écris une présentation Vignettes de six diapositives
pour la revue de sprint, dans
docs/presentations/revue-de-sprint.md.
```

</u-page-section>

<u-page-section :ui="{"container":"pt-0 sm:pt-0 lg:pt-0 pb-24"}">
<u-page-c-t-a :links="[{"label":"Commencer le tutoriel","to":"/docs/demarrer/premiere-presentation","trailingIcon":"i-lucide-arrow-right"},{"label":"Écrire avec un agent","to":"/docs/ecrire/ecrire-avec-un-agent","color":"neutral","variant":"outline"}]" description="Le tutoriel vous guide de la page blanche au lien envoyé à un collègue, puis à la présentation avec vos notes." title="Votre première présentation" variant="subtle">



</u-page-c-t-a>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://vignettes.io/.well-known/api-catalog)
- [Sitemap (XML)](https://vignettes.io/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://vignettes.io/sitemap.md)
- [llms.txt: index of the documentation for LLMs](https://vignettes.io/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://vignettes.io/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://vignettes.io/openapi.json)


## Sitemap

See the full [sitemap](https://vignettes.io/sitemap.md) for all pages.