iCraft Editor

iCraft Editor is a 3D diagram designer that can help you draw network diagrams and other 3D diagrams.

Comment

Inspiration

The inspiration for iCraft Editor came from the need for a powerful, user-friendly tool to design and visualize complex software architectures in 3D. Traditional 2D diagrams often lack the depth and clarity needed to fully convey system structures and relationships, especially as software architectures grow in complexity. iCraft Editor aims to bridge this gap, providing an interactive 3D environment that empowers users to create dynamic and detailed representations of their software systems.

What it does

iCraft Editor allows users to design, edit, and visualize software architecture diagrams in 3D. It supports a range of visual elements, including servers, networks, databases, and various IT infrastructure components, making it easy for users to build realistic, multi-layered representations. Users can interact with the 3D models to inspect details, adjust layouts, and gain a better understanding of system relationships. The editor is also designed to be highly customizable, offering various styling, positioning, and interaction options to meet diverse project needs.

How I built it

iCraft Editor was built using a combination of Three.js for 3D rendering and React for building the user interface, with additional backend services integrated for data management. Blender was used to design and optimize 3D models of architecture components. The entire project is structured as a Progressive Web App (PWA) to enhance accessibility and support offline functionality. iCraft Editor also leverages Nextra for documentation and localization, allowing it to support multiple languages, which is essential for international users.

Challenges I ran into

One of the biggest challenges was ensuring smooth performance while rendering complex 3D models and maintaining interactivity, especially on lower-spec devices. Another challenge was integrating 3D interaction with traditional user interface elements to create an intuitive experience. Additionally, designing an efficient data structure to support hierarchical relationships among components and their interdependencies in real-time presented unique technical difficulties.

Accomplishments that I’m proud of

I’m proud of creating an editor that is both visually compelling and highly functional, empowering users to bring their architectural visions to life. Successfully implementing multilingual support with Nextra and optimizing 3D performance were also key accomplishments, as these features make iCraft Editor both accessible and scalable. Additionally, building a PWA version ensures that the tool is not only powerful but also versatile in various usage environments.

What I learned

Developing iCraft Editor taught me a great deal about managing 3D assets and optimizing them for web applications. I also deepened my knowledge of PWA architecture, enabling the tool to offer both online and offline functionalities seamlessly. Moreover, working on localization with Nextra highlighted the complexities of internationalization and taught me valuable skills in designing software for a global audience.

What’s next for iCraft Editor

The next steps for iCraft Editor include expanding the library of 3D components, integrating real-time collaboration features, and enhancing export options for easier sharing across platforms. We also plan to explore AI-driven suggestions that can help users optimize their architectures based on best practices. Furthermore, expanding into more specific industry templates, such as those for automotive or IoT, could make iCraft Editor a versatile tool across various technical fields.

Let me know if you’d like to make any adjustments!

Share this project:

Updates

posted an update —

Release Notes - 1.1.0 (2024-09-20)

Modern UI Design

A brand-new modern interface design enhances the overall user experience with a clean and intuitive layout.

New Animation Editor

We have introduced a new animation editor with a range of features and improvements, enabling more flexible animation creation:

• Multiple Animation Schemes Management: Easily manage various animation schemes.
• Animation Node Property Maintenance: Supports detailed property settings for various animation nodes for precise control.
• Seamless Play and Pause for Animation Nodes: Enables smooth, continuous animation playback with the ability to pause at any time.
• Step-by-Step Animation Execution: Execute animations step by step, with the option to go to the previous or next step.
• Parallel Animations: Effortlessly create multiple parallel animations, enhancing scene dynamics.
• New Line Drawing Animation: Supports the creation and editing of multiple line animations.
• New Line Flow Animation: Brings smooth line flow effects for enhanced visual performance.
• New Camera Keyframe Animation: Easily create keyframe animations for precise camera angle transitions.
• New Light Ball Cursor Keyframe Animation: Adds more creative options for light ball trajectory animations.
• New Fade-In Animation: Adds fade-in effects to elements, improving scene transitions.
• New Fade-Out Animation: Creates fade-out effects for smoother animation sequences.
• New Replay and Loop Functions: Supports replay and loop playback for continuous dynamic effects.
• Dynamic Animation Property Panel: Automatically displays different animation property options based on the element type.
• Animation Scheme Optimization: Now supports up to 10 custom animation schemes for more complex creations.
• Support for Multiple Animation Nodes: Allows multiple animation nodes on the same element, enhancing animation richness.
• Enhanced Animation List Interaction: Hovering over the animation list now highlights the corresponding element in the 3D scene, improving interaction feedback.

New Custom View Feature

• Custom View Save: Save any view for easy access and future use.
• One-Click View Switch: Switch between different views with a single action, improving scene navigation efficiency.

This update brings significant enhancements to the animation editor, optimizing the user experience and providing more creative flexibility.

Log in or sign up for Devpost to join the conversation.