Competition Task Overview

Background

Fujitsu, which is the client company in this challenge, has AI Platform. Various services has being developed on that platform.
The client needs a solution to develop services in more effective and productive.
Some diagram like Flowchart for decision making is considered as very useful to design logic of AI, and developers are using general-purpose drawing tool for designing.
As the first step to develop the overall solution, they want Topcoder community to do prototyping Web-based design tool for these diagrams.

Goal of this challenge

The goal of this challenge is to create a web-based design tool. The tool should be useful to draw diagrams like following illustration, which are like Flowchart for decision making.
Introducing several items to explain some important concepts in the challenge. Let’s call the biggest design item as Diagram, which is a container of subordinate items. Diagram can contain Nodes and Edges. Nodes are used to represent main concerns in a diagram, which are some “State”, “Action”, “Logical branch”, “Object”, etc. And Edges are used to connect Nodes with a direction.
Illustration

Features

Diagrams

Diagram is the biggest design item where a user can draw a design something with Nodes and Edges.

Supposed features related to Diagrams are:

- Create new Diagram
- Save Diagram

Nodes

Node is a subordinate design item of Diagram, which is used to represent an important concern like “State”, “Action”, “Logical branch”, “Object”, etc.
It's supposed that various shapes can be used to show a Node. And Nodes should have some properties.

Supposed features related to Nodes are:

[major]
- Create new Node with its shape. Available shapes: Oval, Rectangle
- Move Nodes
- Remove a Node from Diagram
- Copy Node
- Edit properties on Node. Properties: Label, Background color, Font color, Font size
[minor]
- Available shapes: Diamond, Hexagon
- Properties: Border style, Border color, Metadata
 

Edges

Edge is a subordinate design item of Diagram and used to connect 2 Nodes. (A Node can be connected with itself by an Edge)
An Edge should always present with Nodes which it connects. This means that Edges can not exist without connection in Diagram.
As same as Nodes, Edges should have some properties.

Supposed features related to Edges are:

[major]
- Create new Edge
- Remove an Edge from Diagram
- Edit properties on Node. Properties: Title, Color, Line width, Line style[solid, dashed, dotted], Font color, Font size
[minor]
- Properties: Direction, Metadata
 

Editor

Editor provides user interface to realize features of Diagrams/Nodes/Edges.
Editor is expected to provide general features in drawing tool like MS Power Point.
One great example: Rappid DEMO

Supposed features except for ones described in above sections:

[major]
- Zoom-In/Out
- Select object(s) to focus
- Panning canvas
[minor]
- Undo/Redo
- Palette for Node shape
- Property box to edit properties of an object
- Comments
 

Data

We need to be able to export/Import Diagram with JSON format text. It’s required that a diagram should be restored from JSON as what it was seen before exporting. JSON data should contain information about locations of items in diagram.

This is a major requirement.

 

Auto Layout

The editor should support auto-layout, this is a major requirement.
 

Usability

Though UX is not concerned in this challenge, there are a few requirements about the usability.
A Diagram which describes a complex logic will have a lot of Nodes and Edges.
Client wants an ability to put a Node in Diagram and connect it to another one with Edge smoothly. And they also wants to repeat the same operation quickly without much stress.
 

Existing Library

We are aware that an existing open source site can already cover all our requirements, however that site has a lot of features we don’t need. So we’ll accept a solution based on that, but we want a minimal solution that only covers our required features, which means you’ll need to do a lot of cleanup of code and unnecessary features so the code is easy to maintain and update to include new features. This is considered a major requirement.

General Requirements in Writing Code

- Source code must be written in US-English
- The prototype must be built using HTML5 / CSS3
- Don't make your code depend on specific features in particular browser.
- Ensure your submission is free of HTML and CSS validation errors and warnings
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
 

Introduction to Subsequent Challenges

Please note that the following features are planned in subsequent challenges.
- Changing Diagram by Server Push technology [POC work]
 

Technology Overview

- Javascript
- HTML5
- CSS3
 

Browser requirement

- It's desired to be compatible with modern browsers.
- Note that submissions will be tested with the latest version of Google Chrome.
 

Licenses & Attribution

Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
* Note that GPL/AGPL are not allowed to use in this challenge.
Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.


 

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:
- Full code that covers all requirements
- A complete and detailed deployment document explaining how to deploy the application including configuration information.
- You are encouraged to include brief doc to appeal advantages of your solution.