Back to home

    Diagrammable Classroom – User Manual (MVP)

    Grade diagrams, not file uploads.

    Diagrammable turns schema and system-design tasks into interactive assignments inside Moodle and WordPress-based LMSs. Students work on diagrams directly in the browser; you review everything from a single dashboard instead of juggling dozens of PDFs or screenshots.

    Table of Contents

    1. What Diagrammable Classroom is

    Diagrammable Classroom is an LMS integration (Moodle module + WordPress plugin) that lets you:

    • Assign interactive diagrams (database schemas, system diagrams, flows, etc.) instead of "upload a JPEG/PDF" tasks.
    • Give every student their own editable copy of a diagram (Student-Copy).
    • Review all submissions from a single instructor dashboard:
      • Open any diagram in one click.
      • Inspect structure (tables, relationships, services, flows).
      • Add feedback and record a grade.
    • Export all submissions as:
      • PNGs (for archiving or external sharing).
      • CSV (for gradebook import or analysis).

    1.1 Supported platforms (MVP)

    Diagrammable Classroom currently supports:

    • Moodle (as an activity module: mod_Diagrammable)
    • WordPress LMS, via a WordPress plugin:
      • LearnDash
      • TutorLMS
      • LifterLMS
      • LearnPress

    2. Core concepts

    2.1 Template

    A Template is a pre-built diagram that defines the starting point of an assignment.

    Examples:

    • "Normalize Customer/Orders Schema"
    • "Add Caching Layer"
    • "Microservices Architecture"
    • "Library Management DB"

    Each template includes:

    • Subject – e.g. Databases, Systems, Networking.
    • Level – e.g. Beginner, Intermediate, Advanced.
    • Diagram structure – nodes (tables/services), arrows (relationships), labels.
    • Locked parts – fixed context (e.g., existing tables and keys that must stay).
    • Editable parts – what students can change (e.g., missing relationships, new entities).

    2.2 Student-Copy

    A Student-Copy is an individual instance of a template for one student.

    • Created automatically the first time the student opens the assignment.
    • Bound to a specific student + a specific assignment.
    • Behaves like an in-browser diagram file with auto-save.
    • After submission, becomes read-only for the student but inspectable for the instructor.

    2.3 Assignment

    A Diagrammable Assignment is a regular LMS activity that uses a specific template and automatically creates Student-Copies as students open it.

    2.4 Dashboard

    The Dashboard is the instructor view for one assignment, showing all students' status, time spent, and grades in one place.

    3. Getting started

    3.1 Prerequisites

    You need:

    • A supported LMS (Moodle or WordPress with a supported LMS plugin)
    • Instructor/teacher privileges in that LMS
    • The Diagrammable Classroom plugin/module installed and activated

    3.2 Installation overview

    3.2.1 WordPress

    1. Log in as a WordPress admin
    2. Go to Plugins → Add New
    3. Search for "Diagrammable Classroom" or upload the provided .zip file
    4. Click Install, then Activate
    5. Follow the plugin's onboarding wizard

    3.2.2 Moodle

    1. Log in as a site administrator
    2. Upload the mod_Diagrammable package via Site administration → Plugins → Install plugins
    3. Confirm installation and run any database upgrade steps
    4. Optionally configure global settings

    4. Template Library

    The Template Library is where you browse, preview, and select diagram templates.

    4.1 Opening the Template Library

    From within your course editor, you can access the template library through the block settings (WordPress) or activity settings (Moodle).

    4.2 Choosing a template

    Filter by:

    • Subject: Databases, Systems, Networking
    • Level: Beginner, Intermediate, Advanced

    ✅ Tip: For MVP, the strongest pack is Databases – Beginner/Intermediate, ideal for "Databases 1" / "Intro to Databases" courses and bootcamp modules covering relational design.

    5. Creating a Diagrammable assignment

    5.1 In WordPress LMS

    1. Edit a lesson/topic
    2. Add "Diagrammable Assignment" block
    3. Select template from the library
    4. Set points and due date (optional)
    5. Save lesson

    5.2 In Moodle

    1. Turn editing on
    2. Add an activity → Diagrammable Assignment
    3. Name it and choose template
    4. Set grade and due date
    5. Save and return to course

    6. Student experience

    From the student's perspective, Diagrammable looks and behaves like part of the LMS.

    6.1 Opening the assignment

    Students see an embedded diagram frame with a "Start" button. On first open, Diagrammable creates their personal Student-Copy.

    6.2 Working on the diagram

    • Drag nodes (tables, services, components)
    • Fill missing labels (column names, foreign keys, service names)
    • Add connections where allowed
    • Changes auto-save every few seconds
    • Can close and resume anytime before submission

    6.3 Submitting the assignment

    When done, students click Submit. The Student-Copy becomes read-only and their status changes to Submitted.

    🧑‍🎓 No extra accounts: Students never create a Diagrammable account. All access happens via their existing Moodle / WordPress LMS session.

    7. Reviewing submissions (Instructor dashboard)

    7.1 Opening the Dashboard

    Access the dashboard by opening the assignment as an instructor. Instead of the student view, you'll see the submissions overview.

    7.2 Submissions overview

    For each student you'll see:

    • Name – as provided by the LMS
    • Status – Not started / In progress / Submitted
    • Time spent – approximate cumulative editing time
    • Grade – current grade if set

    7.3 Inspecting a Student-Copy

    Click any row to open the student's diagram in read-only mode. Zoom/pan to inspect keys, relationships, and structure without opening separate files.

    8. Grading & exporting

    8.1 Grading a submission

    Enter a score in the Grade field and save. In Moodle, the grade syncs to the gradebook automatically. In WordPress LMS, grades are stored in the plugin and optionally synced to the LMS.

    8.2 Bulk export

    8.2.1 Export PNGs

    Generates a ZIP file with one PNG per student diagram. Use for offline archiving, documentation, or sharing with other staff.

    8.2.2 Export CSV

    Includes student identifier, name, submission time, time spent, grade, and structural metrics. Use for uploading grades to another system or running analysis.

    9. Managing templates

    9.1 Using built-in curriculum packs

    Most instructors use the built-in templates from Curriculum Pack v1, which are maintained centrally and updated regularly with new subjects.

    9.2 Duplicating and customising templates

    If your edition supports custom templates, you can duplicate existing templates and edit them to adjust difficulty or customize for your course.

    9.3 Department / site template library (Edu tier)

    In the education tier, templates can be shared across instructors, and department leads can mark templates as official for standardized assessments.

    10. Settings & privacy

    10.1 Site-level settings (admin)

    LMS admins can configure global settings including API keys, grade sync options, and analytics features.

    10.2 Privacy model

    Diagrammable is designed to keep personally identifiable information (PII) inside your LMS.

    The Diagrammable backend stores:

    • A hashed student identifier (e.g. sha256(siteSalt + lmsStudentId))
    • Diagram data (shapes, labels, connections)
    • Timestamps (createdAt, updatedAt, submittedAt)
    • Assignment IDs and site IDs

    It does not know student names or email addresses. The mapping from hash to real student identity remains exclusively inside your LMS.

    11. Quick reference (cheat sheet)

    Create assignment (WordPress)

    1. Edit lesson → Add Diagrammable Assignment block
    2. Click Select template → pick one
    3. Set points/due date (optional)
    4. Save lesson

    Create assignment (Moodle)

    1. Turn editing on → Add activity → Diagrammable
    2. Name it, choose template
    3. Set grade/due date
    4. Save and return to course

    Student flow

    1. Open lesson/activity → "Start diagram"
    2. Edit diagram → auto-save
    3. Click Submit → diagram locks
    4. Status becomes Submitted

    Instructor flow

    1. Open assignment → Dashboard
    2. See students with status, time, grade
    3. Click student → inspect → grade
    4. Export PNG/CSV if needed
    Back to home