القائمة
Guide to tldraw for infinite canvas whiteboarding and diagram creation
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/brycewang-stanford/Auto-Empirical-Research-Skills --skill tldraw-whiteboard-guideيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | tldraw-whiteboard-guide |
| description | Guide to tldraw for infinite canvas whiteboarding and diagram creation |
| metadata | {"openclaw":{"emoji":"🖊️","category":"tools","subcategory":"diagram","keywords":["whiteboard","infinite canvas","diagram SDK","collaborative drawing","research diagrams","visual thinking"],"source":"https://github.com/tldraw/tldraw"}} |
tldraw is an open-source infinite canvas whiteboard SDK with over 46K stars on GitHub. It provides a complete whiteboard experience that can be used standalone or embedded into custom applications. The library offers a polished, intuitive drawing interface with shapes, connectors, text, freehand drawing, and image support, all running in the browser with no backend required for basic use.
For academic researchers, tldraw serves multiple roles. It can function as a collaborative brainstorming tool for research ideation sessions, a diagram creation tool for papers and presentations, a visual note-taking surface during literature reviews, and a framework diagramming tool for conceptual models. Unlike traditional diagramming tools that impose rigid structures, tldraw's freeform canvas encourages the kind of fluid visual thinking that drives research innovation.
The SDK architecture makes tldraw particularly interesting for research tool builders. It can be embedded into lab notebooks, research management platforms, and educational tools. The state management system is extensible, allowing developers to add custom shapes, tools, and behaviors for domain-specific diagramming needs such as circuit diagrams, molecular structures, or experimental workflow visualizations.
The fastest way to use tldraw is through the hosted version at tldraw.com. Create diagrams immediately with no installation, and share them via links.
# Clone and run locally
git clone https://github.com/tldraw/tldraw.git
cd tldraw
npm install
npm run dev
# Access at http://localhost:5420
# Install the tldraw package
npm install tldraw
import { Tldraw } from 'tldraw';
import 'tldraw/tldraw.css';
function ResearchWhiteboard() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<Tldraw />
</div>
);
}
tldraw provides a comprehensive set of shape tools suitable for creating research diagrams:
A typical research conceptual framework can be constructed using tldraw's shape tools.
Example: Conceptual Framework for Mixed-Methods Study
1. Create a Frame labeled "Research Design"
2. Add rectangles for each research phase:
- "Literature Review" -> "Hypothesis Formation"
- "Quantitative Study" -> "Statistical Analysis"
- "Qualitative Study" -> "Thematic Analysis"
- "Integration" -> "Conclusions"
3. Connect phases with arrows showing sequence and relationships
4. Use color coding:
- Blue rectangles: quantitative components
- Green rectangles: qualitative components
- Purple rectangles: integration points
5. Add text labels for key variables and relationships
6. Use sticky notes for annotations about methods and tools
tldraw supports real-time collaboration when deployed with its sync backend, making it ideal for remote research meetings.
import { Tldraw, createTLStore } from 'tldraw';
import { useSync } from '@tldraw/sync';
function CollaborativeWhiteboard({ roomId }) {
const store = useSync({
uri: `wss://collaboration-server.lab.internal/connect/${roomId}`,
assets: { /* asset configuration */ }
});
return (
<div style={{ width: '100%', height: '80vh' }}>
<Tldraw store={store} />
</div>
);
}
One of tldraw's most powerful features for research is the ability to define custom shapes. Researchers can create domain-specific visual elements.
import {
ShapeUtil,
TLBaseShape,
HTMLContainer,
BaseBoxShapeUtil,
} from 'tldraw';
// Define the shape type
type ResearchNodeShape = TLBaseShape<
'research-node',
{
w: number;
h: number;
label: string;
nodeType: 'hypothesis' | 'method' | 'finding' | 'conclusion';
status: 'planned' | 'in-progress' | 'complete';
}
>;
// Color map for node types
const nodeColors = {
hypothesis: '#3B82F6',
method: '#10B981',
finding: '#F59E0B',
conclusion: '#EF4444',
};
const statusIcons = {
planned: '[ ]',
'in-progress': '[~]',
complete: '[x]',
};
class ResearchNodeUtil extends BaseBoxShapeUtil<ResearchNodeShape> {
static override type = 'research-node' as const;
getDefaultProps(): ResearchNodeShape['props'] {
return {
w: 200,
h: 80,
label: 'New Node',
nodeType: 'hypothesis',
status: 'planned',
};
}
component(shape: ResearchNodeShape) {
const { label, nodeType, status } = shape.props;
const color = nodeColors[nodeType];
return (
<HTMLContainer>
<div style={{
width: '100%',
height: '100%',
backgroundColor: color + '20',
border: `2px solid ${color}`,
borderRadius: '8px',
padding: '8px 12px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
fontFamily: 'Inter, sans-serif',
}}>
<div style={{ fontSize: '10px', color: color, fontWeight: 600 }}>
{nodeType.toUpperCase()} {statusIcons[status]}
</div>
<div style={{ fontSize: '13px', color: '#1F2937', marginTop: '4px' }}>
{label}
</div>
</div>
</>
);
}
indicator(shape: ResearchNodeShape) {
return (
<rect
width={shape.props.w}
height={shape.props.h}
rx={8}
ry={8}
/>
);
}
}
import { Tldraw } from 'tldraw';
const customShapeUtils = [ResearchNodeUtil];
function ResearchDiagramEditor() {
return (
<Tldraw
shapeUtils={customShapeUtils}
tools={[/* custom tools */]}
/>
);
}
Use tldraw to create a visual literature map during systematic reviews:
Structure:
- Central node: Research Question
- Branch 1: Theoretical Frameworks
- Sub-nodes for each major theory
- Connections showing relationships between theories
- Branch 2: Key Findings
- Grouped by theme or methodology
- Color-coded by strength of evidence
- Branch 3: Research Gaps
- Identified gaps linked to existing literature
- Arrows pointing to proposed research directions
Layout:
1. Start: "Research Question"
2. Diamond: "Experimental or Observational?"
3. Branch A (Experimental):
- "Control Group Definition"
- "Treatment Conditions"
- "Randomization Strategy"
- "Measurement Protocol"
4. Branch B (Observational):
- "Sampling Frame"
- "Data Collection Method"
- "Confound Identification"
5. Merge: "Data Analysis Plan"
6. End: "Expected Outcomes"
For computational research papers that need to illustrate software architecture:
Components arranged in layers:
- Top: User Interface (web dashboard, CLI)
- Middle: Application Logic (API server, task scheduler)
- Bottom: Data Layer (database, file storage, cache)
- Side: External Services (cloud APIs, instrument interfaces)
- Arrows showing data flow between components
- Color coding for different deployment environments
tldraw supports exporting the canvas or selected shapes as SVG, which is ideal for publication figures.
import { Editor } from 'tldraw';
async function exportDiagram(editor: Editor) {
// Export selected shapes or entire page
const shapeIds = editor.getSelectedShapeIds();
const svg = await editor.getSvg(
shapeIds.length > 0 ? shapeIds : undefined,
{ background: true, padding: 20 }
);
if (svg) {
const svgString = new XMLSerializer().serializeToString(svg);
const blob = new Blob([svgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'research-diagram.svg';
link.click();
URL.revokeObjectURL(url);
}
}
async function exportAsPng(editor: Editor) {
const blob = await editor.toImage(
editor.getSelectedShapeIds(),
{ type: 'png', quality: 1, scale: 3, background: true }
);
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'research-diagram.png';
link.click();
URL.revokeObjectURL(url);
}
For reproducible research diagrams, tldraw's API allows programmatic shape creation.
function generateMethodologyDiagram(editor: Editor, steps: string[]) {
const startX = 100;
const startY = 100;
const boxWidth = 200;
const boxHeight = 60;
const gap = 40;
steps.forEach((step, index) => {
const y = startY + index * (boxHeight + gap);
// Create a box for each step
editor.createShape({
type: 'geo',
x: startX,
y: y,
props: {
geo: 'rectangle',
w: boxWidth,
h: boxHeight,
text: step,
fill: 'semi',
color: 'blue',
},
});
// Connect to next step with an arrow
if (index < steps.length - 1) {
editor.createShape({
type: 'arrow',
props: {
start: { x: startX + boxWidth / 2, y: y + boxHeight },
end: { x: startX + boxWidth / 2, y: y + boxHeight + gap },
},
});
}
});
editor.zoomToFit();
}
// Usage
generateMethodologyDiagram(editor, [
'Data Collection',
'Preprocessing',
'Feature Extraction',
'Model Training',
'Evaluation',
'Publication',
]);