engineering
Engineering Diagram Generator
Quick Start: Choose diagram type → Add symbols from stencil library → Connect with appropriate lines → Add labels/annotations → Wrap in ```drawio fence.
⚠️ IMPORTANT: Always use
```drawiocode fence. NEVER use```xml— it will NOT render as a diagram.
Critical Rules
🔗 This is a drawio-derived skill. All structure, layout, and edge routing rules inherit from drawio SKILL.md. Read the base rules first.
Engineering-specific additions:
- Check stencils/README.md for exact symbol names (e.g.,
mxgraph.electrical.resistors.resistor_1) - Symbol colors: Black(
#000000) for schematic, Blue(#0000FF) for pneumatic, Green(#00FF00) for hydraulic
Engineering Diagram Types
| Type | Purpose | Stencil Library | Example |
|---|---|---|---|
| Electrical Schematic | Circuit diagrams, wiring diagrams | mxgraph.electrical.* (527 symbols) |
electrical-circuit.md |
| P&ID | Process flow, piping & instrumentation | mxgraph.pid.* (478 symbols) |
pid-process.md |
| Rack Diagram | Data center, server rack layout | mxgraph.rack.* (487 symbols) |
rack-datacenter.md |
| Logic Gates | Digital logic circuits | mxgraph.electrical.logic_gates.* |
logic-gates.md |
| Fault Tree | Fault tree analysis (FTA) | mxgraph.electrical.logic_gates.* |
fault-tree.md |
| PLC Ladder | PLC ladder logic diagrams | mxgraph.electrical.plc_ladder.* |
plc-ladder.md |
More from markdown-viewer/skills
architecture
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
1.9Kuml
Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.
1.8Kinfographic
Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
1.7Kcanvas
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
1.6Kgraphviz
Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.
1.6Knetwork
Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.
1.6K