VLC

Blocs Visualisation
Blocs Visualisation

Blocs Visualisation

5 types de blocs pour représenter visuellement des données et processus.

← Retour à la documentation
process
Étapes visuelles d'un processus ou workflow. Supporte 3 layouts : vertical (défaut), horizontal et numbered.

Propriétés

PropriétéTypeDescription
type'process'Type du bloc
ordrenumberPosition dans la leçon
titlestringTitre du processus
layout'vertical' | 'horizontal' | 'numbered'Style d'affichage (défaut: vertical)
stepsarrayÉtapes (id, title, description, icon)
{
  "type": "process",
  "ordre": 5,
  "title": "Processus de fabrication des arancini",
  "layout": "vertical",
  "steps": [
    {
      "id": "s1",
      "title": "Préparation du risotto",
      "description": "Cuire le riz arborio avec du bouillon et du safran. Laisser refroidir complètement."
    },
    {
      "id": "s2",
      "title": "Formage des boulettes",
      "description": "Former des boulettes de riz avec un cœur de mozzarella et ragù."
    },
    {
      "id": "s3",
      "title": "Panure",
      "description": "Passer dans l'œuf battu puis dans la chapelure fine."
    },
    {
      "id": "s4",
      "title": "Friture",
      "description": "Frire à 180°C jusqu'à obtenir une couleur dorée uniforme."
    }
  ]
}

Aperçu

Processus de fabrication des arancini

4 étapes

1

Préparation du risotto

Cuire le riz arborio avec du bouillon et du safran. Laisser refroidir complètement.
2

Formage des boulettes

Former des boulettes de riz avec un cœur de mozzarella et ragù.
3

Panure

Passer dans l'œuf battu puis dans la chapelure fine.
4

Friture

Frire à 180°C jusqu'à obtenir une couleur dorée uniforme.
timeline
Chronologie pour présenter des événements historiques ou des étapes datées. Supporte orientation verticale ou horizontale.

Propriétés

PropriétéTypeDescription
type'timeline'Type du bloc
ordrenumberPosition dans la leçon
titlestringTitre de la chronologie
orientation'vertical' | 'horizontal'Orientation (défaut: vertical)
eventsarrayÉvénements (id, date, title, description, icon, image)
{
  "type": "timeline",
  "ordre": 6,
  "title": "Histoire des arancini",
  "orientation": "vertical",
  "events": [
    {
      "id": "e1",
      "date": "Xe siècle",
      "title": "Origine arabe",
      "description": "Introduction du riz en Sicile pendant la domination arabe.",
      "icon": "🏛️"
    },
    {
      "id": "e2",
      "date": "XIVe siècle",
      "title": "Premières recettes",
      "description": "Apparition des premières versions frites documentées."
    },
    {
      "id": "e3",
      "date": "Aujourd'hui",
      "title": "Plat emblématique",
      "description": "Devenu symbole de la cuisine sicilienne dans le monde entier."
    }
  ]
}

Aperçu

Histoire des arancini

3 événements

1
Xe siècle

Origine arabe

Introduction du riz en Sicile pendant la domination arabe.
2
XIVe siècle

Premières recettes

Apparition des premières versions frites documentées.
3
Aujourd'hui

Plat emblématique

Devenu symbole de la cuisine sicilienne dans le monde entier.
stats
Statistiques visuelles avec animation et indicateurs de tendance. Idéal pour présenter des chiffres clés.

Propriétés

PropriétéTypeDescription
type'stats'Type du bloc
ordrenumberPosition dans la leçon
titlestringTitre du bloc
layout'grid' | 'row'Disposition (défaut: grid)
animatedbooleanAnimation à l'apparition (défaut: true)
statsarrayStatistiques (value, label, icon, trend, description)
{
  "type": "stats",
  "ordre": 7,
  "title": "Statistiques du cours",
  "layout": "grid",
  "animated": true,
  "stats": [
    {
      "value": "95%",
      "label": "Taux de réussite",
      "icon": "🎯",
      "trend": "up",
      "description": "Amélioration de 5% ce mois"
    },
    {
      "value": "2h30",
      "label": "Durée moyenne",
      "icon": "⏱️",
      "trend": "neutral"
    },
    {
      "value": "4.8/5",
      "label": "Note moyenne",
      "icon": "⭐",
      "trend": "up"
    },
    {
      "value": "1,250",
      "label": "Apprenants",
      "icon": "👥",
      "trend": "up",
      "description": "+120 cette semaine"
    }
  ]
}

Aperçu

Statistiques du cours

4 statistiques

🎯
95%

Taux de réussite

Amélioration de 5% ce mois

⏱️
2h30

Durée moyenne

⭐
4.8/5

Note moyenne

👥
1,250

Apprenants

+120 cette semaine

math
Formules mathématiques rendues avec KaTeX (LaTeX). Idéal pour les cours de mathématiques, physique, chimie.

Propriétés

PropriétéTypeDescription
type'math'Type du bloc
ordrenumberPosition dans la leçon
titlestringTitre de la formule
formulastringFormule en LaTeX
explanationstringExplication de la formule
{
  "type": "math",
  "ordre": 8,
  "title": "Théorème de Pythagore",
  "formula": "a^2 + b^2 = c^2",
  "explanation": "Dans un triangle rectangle, le carré de l'hypoténuse égale la somme des carrés des deux autres côtés."
}

Aperçu

Théorème de Pythagore

LaTeX

Dans un triangle rectangle, le carré de l'hypoténuse égale la somme des carrés des deux autres côtés.

mermaid
Diagrammes Mermaid : flowchart, sequence, class, state, ER, gantt, pie, etc. Interactif avec zoom et pan.

Propriétés

PropriétéTypeDescription
type'mermaid'Type du bloc
ordrenumberPosition dans la leçon
titrestringTitre du diagramme
codestringCode Mermaid
captionstringLégende explicative
theme'default' | 'dark' | 'forest' | 'neutral'Thème du diagramme
{
  "type": "mermaid",
  "ordre": 9,
  "titre": "Flux de décision",
  "code": "flowchart TD\n  A[Début] --> B{Condition remplie ?}\n  B -->|Oui| C[Exécuter action]\n  B -->|Non| D[Alternative]\n  C --> E[Fin]\n  D --> E",
  "caption": "Processus de décision simplifié"
}

Aperçu

Flux de décision

Cliquer pour interagir

Légende

Processus de décision simplifié

Types de diagrammes Mermaid supportés

  • flowchart - Diagrammes de flux
  • sequenceDiagram - Diagrammes de séquence
  • classDiagram - Diagrammes de classes UML
  • stateDiagram - Diagrammes d'états
  • erDiagram - Diagrammes entité-relation
  • gantt - Diagrammes de Gantt
  • pie - Diagrammes circulaires
  • timeline - Chronologies Mermaid
    Vibe Learning Club