diff --git a/scdiagram.html b/scdiagram.html
new file mode 100644
index 0000000..29f7d4f
--- /dev/null
+++ b/scdiagram.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>软件结构图绘制考试练习工具（v1.0 作者：liugw@mail.imut.edu.cn)</title>
+    <link rel="stylesheet" href="scdiagram.css">
+    <script type="text/javascript" src="scdiagram.js"></script>
+    <style type="text/css">
+        #canvas{
+            border: 1px solid #333;
+            display: block;
+            margin:20px 20px;
+        }
+        #title2{
+            background: gray;
+            color: white;
+            width:auto;
+            height:20px;
+            position:absolute;
+            top:8px;
+            left:50px;
+        }
+        #test{
+            border: 1px solid #333;
+            width:200px;
+            height:150px;
+            position:absolute;
+            bottom:5px;
+            left: 28px;
+        }
+        #title1{
+            background: gray;
+            color: white;
+            width:auto;
+            height:20px;
+            position:absolute;
+            left:50px;
+            bottom:150px;
+        }
+        #back{
+            border: 1px solid #333;
+            width:200px;
+            height:600px;
+            position:absolute;
+            right:0px;
+            top:20px;
+        }
+        #title{
+            background: gray;
+            color: white;
+            width:auto;
+            height:20px;
+            position:absolute;
+            right:130px;
+            top:8px;
+        }
+        #color{
+            width: 32px;
+            height:32px;
+            position:absolute;
+            right:150px;
+            top:106px;
+        }
+
+        #bcolor{
+            width: 32px;
+            height:32px;
+            position:absolute;
+            right:100px;
+            top:106px;
+        }
+        #range{
+            width:80px;
+            height:32px;
+            position:absolute;
+            right:10px;
+            top:106px;
+        }
+
+        #undo{
+            width:50px;
+            height:25px;
+            position:absolute;
+            right:130px;
+            top:56px;
+            cursor:pointer;
+            text-align: center;            
+        }
+        #redo{
+            width:50px;
+            height:25px;
+            position:absolute;
+            right:70px;
+            top:56px;
+            cursor:pointer;
+            text-align: center;            
+        }
+        #save{
+            width:50px;
+            height:25px;
+            position:absolute;
+            right:10px;
+            top:56px;
+            cursor:pointer;
+            text-align: center;            
+        }
+
+        #text{
+            width: 180px;
+            height:25px;
+            position:absolute;
+            bottom:10px;
+            right:10px;
+        }
+    </style>
+</head>
+<body background-color="rgba(0,0,0,0.5)">
+<div class="box">
+    <canvas id="canvas" width="1000" height="600"></canvas>
+    <div id="title2">绘图区</div>
+    <div id="back"></div>
+    <div id="title">工具箱</div>
+    <input type="color" id="color" title="前景色" value="#000000"/>
+    <input type="color" id="bcolor" title="背景色" value="#FFFFFF"/>
+    <input type="range" id="range" min="1" max="10" title="画笔粗细" value="1"/>
+    <input type="button" id="undo" onclick="undo();" title="撤销上一步操作" value="撤销" disabled/>
+    <input type="button" id="redo" onclick="redo();" title="恢复上一步操作" value="重做" disabled/>
+    <input type="button" id="save" onclick="save();" title="保存绘制结果" value="保存" disabled/>
+    <div id="tools">
+        
+    </div>
+    <input type="text" id="text" value="模块名称" title="输入文本" hidden/>
+    <div id="test">
+        &nbsp;<br/>
+        1<br/>
+        2<br/>
+    </div>
+    <div id="title1">题目要求</div>
+</div> 
+
+<script type="text/javascript">
+    //画布对象
+    var canvas=document.getElementById("canvas");
+    //工具箱对象
+    var back=document.getElementById("back");
+    //题目对象
+    var test=document.getElementById("test");
+    //绘画操作对象
+    var cxt=canvas.getContext("2d");
+    //前景色对象
+    var color=document.getElementById("color");
+    //背景色对象
+    var bcolor = document.getElementById("bcolor");
+    //画笔大小对象
+    var size=document.getElementById("range");
+    //加载工具
+    var tools = document.getElementById("tools");
+    loadTools(tools);
+    //文本对象
+    var text = document.getElementById("text");
+    text.hidden = false;
+    //界面自适应处理
+    function resize(){
+        canvas.width = window.innerWidth - 250;
+        canvas.height = window.innerHeight - 200;
+        back.style.height = (window.innerHeight - 28) + "px";
+        test.style.width = (window.innerWidth - 250) + "px";
+    }
+    resize();
+    //窗口自适应事件
+    window.onresize = function(e){
+        resize();
+    }
+    
+    //鼠标按下
+    canvas.onmousedown= function (e) {
+        myMouseDown(e, this);
+    };
+    //鼠标移动
+    canvas.onmousemove= function (e) {
+        myMouseMove(e, this);
+    }
+    //鼠标松开
+    canvas.onmouseup= function (e) {
+        myMouseUp(e, this);
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
