Welcome & Compliance Notice

Excalidraw is a virtual whiteboard tool that lets you create hand-drawn-style diagrams quickly and intuitively. This guide helps faculty, instructors, staff, and researchers at the Faculty of Information use Excalidraw securely and effectively for visual collaboration, teaching, and research – when used in accordance with provided guidelines.  

This guide is for informational purposes only. It provides operational guidance for using Seafile in a manner that supports compliance with the Freedom of Information and Protection of Privacy Act (FIPPA) and University of Toronto data governance policies. It does not constitute legal advice or serve as a certification of institutional or statutory compliance.

Users are solely responsible for ensuring that their specific use cases align with applicable privacy, security, and data retention obligations. For authoritative guidance, or when in doubt, users must consult the University of Toronto’s compliance office via the Office of the Governing Council.

🚩IMPORTANT: Always use the Faculty-hosted instance of Excalidraw: https://excalidraw.ischool.utoronto.ca  

DO NOT USE “https://excalidraw.com” or Excalidraw+.  These platforms are not fully compliant with the Freedom of Information and Protection of Privacy Act (FIPPA) and are less suitable for academic, research, or institutional use. 

Who This Guide Is For

• Faculty and instructors creating visual aids or sketching teaching materials.  
• Staff collaborating on workflows, processes, or design diagrams.  
• Researchers developing visual frameworks or co-design maps. 
• Students under faculty supervision using Excalidraw in class.  

Why Use Excalidraw Locally

• FIPPA Compliance: Data remains inside U of T infrastructure.  
• Private by Default: Files live on your browser unless exported. 
• No Login Required: Fully anonymous; no user tracking. 
• No External Servers: Unlike the public version, your work stays within our hosted environment.  

Getting Started

Open https://excalidraw.ischool.utoronto.ca and begin drawing using the toolbar (shapes, text, arrows, freehand, etc.).  

Toolbar

The toolbar at the top of your screen features your main drawing tools – shapes, arrows, text, and selection tools live here. This is where you choose what kind of element to draw on the canvas.  

✅Toolbar Quick Guide 

Icon	Shortcut	Description and Tips
	h	Select and hold anywhere on the canvas, then drag your cursor to move the canvas in any direction. Alternatively, you can hold the spacebar while selecting and dragging with your mouse to achieve the same effect.
	1	Select and move objects on your canvas.
	2	Select and drag to set the start and end points.
	3	Select and drag to set the start and end points.
	4	Select and drag to set the start and end points.
	5	Select and drag to set the start and end points.
	6	Select and drag to set the start and end points.
	7	Select and drag to draw on the canvas.
	8	Select a space on the canvas where you want the text to appear and start typing. Or select and drag to specify the desired width of your text box.
	9	Select and upload images (.png, .jpg, .svg) or copy and paste the image onto your canvas directly.
	0	Select and drag over elements you wish to erase. The tool will remove any strokes or shapes you pass over.
		The Lock Tool locks the currently selected tool, instead of defaulting back to the selection/arrow tool. Select the tool you want to use and then click the lock icon. Once you are done, click unlock so your cursor defaults back to the selection tool moving forward.
		Click the More Tools icon to open a dropdown menu. Click on the tool you want to use. Once selected, the tool will be activated, and you can use it just like any other tool.

The Left Sidebar: Element Customization Panel

When you select any element(s) on the canvas—such as a shape, line, arrow, or text box—the left sidebar appears, offering a range of customization options. This panel lets you fine-tune the appearance and behavior of your selected item(s).  

💡Note: The sidebar customization panel is context-sensitive, so it only shows options relevant to what you’ve selected. (e.g. font family options will only exist if your selection includes an element(s) with text).  

Color Pickers

1. Stroke Color:
   • What it does: Changes the outline color of the selected element. 
   • How to use: Click the color swatch to open the color picker or choose from preset colors. 
2. Background Color:
   • What it does: Fills the inside of shapes or text boxes. 
   • Tip: Set to transparent for a hollow look. 
3. Fill:
   • What it does: The Fill option controls how the background of a shape is rendered. 
   • Tip: Hachure and cross-hatch styles work best with lighter background colors to maintain visibility. 

💡Tip: When customizing colors (like stroke, background, or text color), you’ll see a hex code field (e.g. #FF5733) with a pencil icon next to it. You can highlight the hex code to edit it manually. Or you can use the pencil icon next to the hex code field to match a color on your canvas directly.  

How to Use the Eyedropper (Pencil Tool):  

1. Select an element.  
2. In the color picker, click the pencil icon.  
3. Your cursor will change to a color picker tool.  
4. Move your cursor over the canvas to hover over the color you want to match.  
5. Click on the desired color – it will automatically apply to the selected element.  

📃 Note: this works for any visible color on the canvas, including shapes, text, images, and even background colors.  

Stroke Customizations

1. Stroke Width:
   • What it does: Adjusts the thickness of the element’s outline. 
   • Options: Thin, regular, bold, extra bold. 
2. Stroke Style:
   • What it does: Changes the line style (solid, dashed, dotted). 
   • Use case: Great for distinguishing different types of connections or boundaries. 
3. Sloppiness:
   • What it does: Controls how “hand-drawn” or “neat” your shapes and lines appear. 
   • Tip: Combine sloppiness with hachure fill styles for a more organic, sketch-like look. 
4. Edges:
   • What it does: Adjusts the corner radius of shapes like rectangles and diamonds. 
   • Use case: Useful for softening the look of UI mockups, flowcharts, or when you want a friendlier visual style. 

Font and Text Size

1. Font Family:
   • What it does: Lets you choose the style of text used in your diagram 
   • Options: Hand drawn, normal, and code (a monospace font – Like Courier New)
2. Font Size:
   •   What it does: Changes the size of your font.  
   • Tip: you can create custom sizes by selecting the text element and clicking and dragging an edge or corner of the text element.  

Opacity, Layers, and Other Actions

✅Layers and Other Actions Quick Guide 

Icon	Keyboard Shortcut	Function
	Ctrl + Shift + [	Send to back
	Ctrl + [	Send backward
	Ctrl + ]	Bring forward
	Ctrl + Shift + ]	Bring to front
	Ctrl + D	Duplicate
		Delete
	Ctrl + G	Group selection
	Ctrl + K	Link

🚩Important: The Link function only works on text elements that are not wrapped in a container.  

💡Work Around: To add a link to an element of text that is wrapped in a shape container:  

1. Right click on the shape containing text and select Unbind text from the menu.  
2. Select the text and click the link icon in the sidebar menu.  
   • Alternatively: right click on the text and select Add link from the menu.  
3. Paste your link in the text field and click enter. You can later edit the link if needed.  
4. Click and drag across the shape and the text to select both. Click the group icon in the sidebar. This will re-bind the text to the container and keep the link intact.  
   • Alternatively: Select both elements, right click on the selection and click the group icon (Ctrl+G).  

Customizing the Canvas Appearance

Excalidraw gives you ways to personalize your drawing environment to suit your style or improve visibility. Here’s how yo adjust the background color, theme, and grid mode:  

1. Background Color:
   • Click the hamburger menu (top-left).  
   • Choose a preset color or use the color picker for a custom shade.  
   • Tip: A lighter background works well for printing; darker backgrounds are easier on the eyes for digital use.  
2. Switch Theme:
   • Click the hamburger menu (top-left)  
   • Options: Light, Dark, and System (system automatically matches your device’s theme.  
3. Toggle Grid Mode:
   • Enable or disable the grid overlay on the canvas by pressing Crtl + ‘  
   • Useful for aligning elements or creating structured layouts 

Saving and Exporting in Excalidraw

Excalidraw gives you flexible options to save your work or export it for sharing.  

💡Reminder: Your browser’s local storage is not permanent. Always export and save your work locally to avoid data loss. 

Save to Disk

• What it does: Downloads your drawing as a .excalidraw file to your computer. 
• Why use it: This file keeps all your elements editable, so you can reopen and continue working later.  
• How to use:  
  • Select the hamburger menu > Save to > Save to file 
  • Choose where to save the file on your device 

Save to Current File

• What it does: Updates the file you originally opened or saved, without creating a new one.  
• Why us it: Useful when you’re working on an existing .excalidraw file and want to save changes directly.  
• 🚩Note: This option only appears if you’ve already opened a file from disk.  

💡Reminder: Save your files after each major change. If your browser cache is cleared, your drawings will be lost. 

Upload Your Saved File to Continue Where You Left Off

When you close your browser at the end of a work session, your work may not be saved because your browser’s history is not permanent. That is why it is important to save your work to a file. At the start of your next work session, click Open in the hamburger menu and select Load from file.  

Export As Image

When you’re done with your drawing, you can export it as an image.  

• To export your entire canvas, click a blank space on the canvas and then select Export image from the hamburger menu.  
• To export a selection of elements on your canvas, click and drag to select the elements and then click Export image in the hamburger menu.  

When exporting as an image, there are several options, each with their own purpose:  

1. Only selected:  
   • What it does: allows you to either export your selection of elements or your entire canvas.  
2. Background:
   • What it does: allows you to export your image with or without background fill.  
3. Dark mode:
   • What it does: allows you to export your image in dark mode.  
4. Embed scene:
   • What it does: Excalidraw hides a copy of your full drawing (called the “scene”) inside the image file.  
   • This means the image still looks like a normal PNG or SVG, but if you drag it back into excalidraw later, it will reopen as an editable drawing – just like you left it.  

🚩Important: If you embed scene data, the image file will be larger than a normal image because it contains extra data.  

✅Export Image Quick Guide 

Export Type	Editable Later?	File Size	Best For
PNG (no scene data)	❌No	Small	Sharing a simple image
PNG (with scene)	✅Yes	Larger	Backups or editable sharing
SVG (no scene data)	❌No	Small	Websites, design tools
SVG (with scene)	✅Yes	Larger	Editable vector graphics
Clipboard	❌No	N/A	Quick pasting into other apps.

Advanced Features

Using the Library

The Library in Excalidraw lets you save and reuse commonly used shapes, icons, or components – perfect for speeding up your workflow. To open it, select the Library button (top-right).  

✅What You Can Do: 

• Save custom elements:  
  • Select any element(s) and click the Library button.  
  • Select the Plus (+) icon to add your selection to your library.  
  • Alternatively: right click on your selection of elements and select Add to library from the menu.  
• Access built-in libraries:  
  • Use pre-made libraries shared by the community by selecting Browse libraries.  
• Organize your assets: 
  • Group related items and add the group to your library (e.g. UI components, flowchart symbols) for quick access.  

🔧How to Use It:  

1. Draw or select an element (or elements).  
2. Click the Library icon (top-right).  
3. Click “+” to add your selection to your library.  
4. To reuse, open the Library and click on any saved item to paste it onto your canvas.  

🔨How to Edit and Save Content in Your Library:  

1. Removing selected items from your library:
   • Hover over the thumbnail of the element in your library.  
   • Click the checkbox in the thumbnail (top-right).  
   • Click the three dots and select Remove or select Save to if you want to save the selected library items your computer.  
2. Saving selected items in your library:  
   • Hover over the thumbnail of the element in your library.  
   • Click the checkbox in the thumbnail (top-right). 
   • Click the three dots and select Save to. 
3. Saving your entire library:
   • Open your library and click the three dots.  
   • Select Save to to save your library locally. 
4. Importing previously saved elements in your library:  
   • Open your library and click the three dots.  
   • Select Open to import your desired elements into your library.  

💡Tips:  

• Libraries are saved locally in your browser.  
• You can import/export libraries to share with others or back them up.  

Real-Time Collaboration

Excalidraw supports live collaboration, allowing multiple people to draw and edit on the same canvas at the same time – great for brainstorming, teaching, or remote teamwork.  

✅What You Can Do: 

• Invite others to your drawing session.  
• See live updates as others draw or move objects.  

🔧How to Collaborate: 

1. Select Live Collaboration from the hamburger menu, or select the Share button in the top right corner.
2. A unique shareable link will be generated.  
3. Send the link to others – they can join instantly, no account needed.  
4. To stop collaborating, select Live collaboration from the hamburger menu or the Share button (top-right) again and select Stop session.  

🔐Privacy Notes:  

• Collaboration is end-to-end encrypted.  
• Sessions are temporary unless saved manually.  
• You can disable collaboration at any time.  

🚩Important: be sure to save your final work before stopping the collaboration session.  

Role-Based Use Cases

Individual Work

Use Excalidraw to:

• Brainstorm concepts or sketch workflows. 
• Create diagrams or lecture materials. 
• Capture notes visually.  

Steps to Begin

• Access the local instance (https://excalidraw.ischool.utoronto.ca) 
• Begin sketching ideas using drawing tools.  
• Export your file regularly to back it up.  

✅Individual Quick Start Checklist 

• Open https://excalidraw.ischool.utoronto.ca  
• Start sketching using shapes, arrows, and text. 
• Use color and labels to organize your ideas.  
• Save to .excalidraw for editing later.  
• Export to .png for slides or documentation. 
• Save files to OneDrive or a secure folder – don’t rely on local storage.  

Group & Team Collaboration

Use for planning sessions, service design, or collaborative sketching.

Steps to Begin

• Launch the local Excalidraw instance.  
• Click “Share” (top-right) 
• Share the session link securely.  
• Export and save your work at the end.  

✅Team Collaboration Quick Start Checklist 

• Use only https://excalidraw.ischool.utoronto.ca  
• Click “Share” to begin a session.  
• Share the session link only with collaborators. 
• Use different colors or shapes for clarity. 
• Assign one person to periodically export the file.  
• Export to .excalidraw and .png before closing the session.  
• Save exported files to a shared drive or secure folder.  

Classroom Use

Use Excalidraw to sketch in real-time, collaborate with students, or illustrate ideas visually.  

Steps to Begin 

•  Open the local instance before class. 
• Create or load a visual template. 
• Share link with students or screen-share the board. 
• Export your board after the session.  

✅Classroom Quick Start Checklist 

• Access Excalidraw before the lesson.  
• Prepare diagrams or exercises in advance.  
• Share links securely (Teams chat, LMS post) 
• Monitor student input and progress. 
• Export to .excalidraw and .png at the end. 
• Save copies to your course folder or drive. 
• Use consistent color codes or shapes for clarity.  

Research Projects

Use Excalidraw for system modeling, framework development, or concept mapping.  

Steps to Begin 

• Use the local instance.  
• Build your model or diagram. 
• Share a link with collaborators if needed.  
• Export versions regularly.  

✅Research Quick Start Checklist 

• Always use: https://excalidraw.ischool.utoronto.ca 
• Sketch systems, models, frameworks. 
• Label components for clarity.  
• Export editable .excalidraw versions regularly.  
• Export to .png for papers, posters, or slides.  
• Use version filenames (e.g., model_v1, model_v2)  
• Store files in secure, version-controlled environments.  
• Avoid storing identifiable or sensitive data.  

Troubleshooting & Known Limitations

• Unsaved Work Lost: Excalidraw saves to browser storage only.  
• Live Sessions Don’t Auto-Save: You must export before closing.  
• No User Roles: Anyone with the link can edit.  
• No Password Protection: Shared links are open access.  
• No Version History: Manual exports are the only way to track changes.  

Security & Privacy

• Local instance = FIPPA compliant. 
• Public instance or Excalidraw+ = ❌Do not use. 
• Files are not uploaded or tracked. 
• Export and store files in U of T-approved systems (e.g., OneDrive or FOI secure storage). 
• Avoid sketches with names, emails, or identifiers. 

Best Practices

• Use only https://excalidraw.ischool.utoronto.ca 
• Always export before closing the tab.  
• Maintain version history for ongoing work.  
• Never use Excalidraw for exams or sensitive content.  
• When collaborating, export periodically to avoid data loss.  

Quick Reference Sheet

Excalidraw @ Faculty of Information – One-Page Quick Guide  

Local Instance Only: https://excalidraw.ischool.utoronto.ca 

Do Not Use: https://excalidraw.com  or Excalidraw+ 

Core Steps:

• Use “Share” > “Live Collaboration” only within secure teams.  
• Share links carefully; there is no authentication.  
• Always export before closing sessions.  

Tips:

• Color code content for clarity. 
• Version your files (v1, v2, etc.) 
• Store securely in U of T-approved drives.  

This guide is maintained by the Faculty of Information to ensure secure, private, and FIPPA-compliant digital collaboration.