Educational MicroSim Skills

Educational MicroSims are lightweight, interactive educational simulations designed for browser-based learning. MicroSims are designed to run in a rectangular iframe placed within the a page of a textbook. The default height of a MicroSim is 500px and they are designed to be width-responsive so they will adapt to various screen sizes and window resize events.

MicroSim Generator List

This list is ordered based on the most general purpose tools to the most case specific tool.

1. General MicroSim with p5: - use for most general MicroSim used for interactive animations and simulations
2. General Chart Generation with ChartJS - used for generating charts
3. Mermaid Generator - used for static workflow and flow chart diagrams
4. Vis Network Graph Generator - used to generate interactive network graph diagrams
5. Causal Loop Diagram Generator - creates interactive causal loop diagrams for systems thinking education
6. Math Function Plot Generator - uses the powerful Plotly.js library for plotting math functions
7. Timeline Generator - used to generate timelines from a list of events
8. Map Generator - generates maps using the Leaflet library
9. Venn Diagram Generator - generates Venn Diagrams
10. Bubble Chart Generator - specialize to only generate bubble charts

Common Elements to All MicroSims

All MicroSims are designed to run in a non-scrolling iframe that contains width-responsive drawing elements.

Sample iframe

<iframe src="http://example.com/microsims/my-microsim/main.html" height="500px" width="100%" scrolling="no">

MicroSims are packaged in a directory with the following files:

1. main.html - holds the main HTML code with possible inline CSS, JavaScript and data
2. index.md - documentation and iframe reference to a local main.html
3. style.css - optional CSS file
4. script.js - optional JavaScript file
5. data.json - optional JSON data file

Each of the skills below contains an assets directory that has these files with the string template- before the file names above.

All MicroSims should be designed to be width-responsive meaning that the components recenter and stretch if the containing window is resized.

MicroSim P5 Generator

Name: microsim-pg
Width Responsive: Yes This is a general skill that generates any p5.js application that can be tested in the p5.js editor. It is ideal for simulations and animations where the user control the behavior through a set of controls at the bottom of the drawing area.

See the Microsim-p5 Description

Chart Generator

Name: chartjs-generator
This generator creates general charts such as:

1. bar charts
2. bubble charts
3. doughnut charts
4. line charts
5. pie charts
6. polar plot charts
7. radar charts
8. scatter charts

The default is 500px high and a width that fills 100% of the enclosing container. If the user does not provide the title, chart type and data, the skill will prompt them for the appropriate information.

See the ChartJS Generator skill description.

Mermaid

Name: timeline-generator
Width Responsive: Yes (with limitations in that the size of the shapes may not change, but they are re-centered)

The Mermaid.js library is ideal for allowing the user to specify the content of a drawing and a layout st

1. Process & Flow Diagrams

These diagrams illustrate workflows, processes, and sequential operations.

1. Flowchart/Graph - General-purpose flowcharts showing decision points, processes, and flow direction
2. State Diagram - Models state transitions and lifecycle of systems or objects
3. Sequence Diagram - Shows interactions between entities over time in a sequential order
4. User Journey - Maps user experiences and touchpoints across different stages

2. Structural & Relationship Diagrams

These diagrams model the structure and relationships between components or entities.

1. Class Diagram - Object-oriented design showing classes, attributes, methods, and relationships
2. Entity Relationship (ER) Diagram - Database schemas showing entities, attributes, and relationships
3. C4 Diagram - Software architecture context, containers, components, and code views
4. Block Diagram - High-level system component diagrams showing functional blocks

See the Mermaid Generator

Vis-Network MicroSim

Name: vis-network This skill will create a graph network diagram using the vis-network JavaScript library. The user should provide a list of nodes and edges as well as an optional list of groups.

See the Vis Network skill description.

Causal Loop Diagram Generator

Name: causal-loop-microsim-generator
Width Responsive: Yes

This skill creates interactive Causal Loop Diagram (CLD) MicroSims for systems thinking education using vis-network. CLDs visualize cause-and-effect relationships, feedback loops (reinforcing and balancing), and system dynamics. Key features include:

• Polarity indicators: Green (+) for positive relationships, Red (-) for negative relationships
• Loop markers: R (reinforcing) and B (balancing) loop indicators with automatic placement
• Interactive details: Click nodes, edges, or loops to see descriptions
• Systems archetypes: Built-in support for common patterns (limits to growth, fixes that fail, tragedy of the commons)
• Educational content: Discussion questions, key insights, and learning objectives

Causal loop diagrams are ideal for teaching systems thinking concepts like feedback dynamics, exponential growth/decay, goal-seeking behavior, and intervention leverage points.

See the Causal Loop MicroSim Generator skill description.

Math Function Plotter

See the Math Function Plotter Plotly skill description.

Timeline Generator

Name: timeline-generator
Width Responsive: Yes This skill will take an input of events and generate a timeline using the vis-timeline JavaScript library. The user must specify the following information and JSON is a good format:

{
  "title": "Sample Timeline",
  "events": [
    {
        "start_date": {
        "year": "2025",
        "month": "11",
        "day": "16"
        },
        "text": {
        "headline": "Project Initiated",
        "text": "The project was formally initiated with stakeholder approval and budget allocation."
        },
        "group": "Planning",
        "notes": "This milestone marked the official start of the project after months of preparation and proposal development."
    }
  ]
}

See the Timeline Generator skill description.

Venn Diagram

This uses the Venn.js library which has not been maintained for several years. Use with caution.

See the Venn Diagram Generator skill description.

Bubble Chart

This is a specialization of the ChartJS skill.

See the Bubble Chart skill description.