I need to present the conceptual architecture of my site in a couple of days. It is an extremely simple web-site:

  • it is made using HTML, CSS, JavaScript, XML and XAMPP for PHP, MySQL and Apache Server which resides locally on my laptop.

  • Basically what can you do on the site is reading some news after you login or register, edit your profile details, like age, gender, field of interest, name, password and why not, translate the whole site content to English if you want to.

  • If you login using administrator credentials what is added in the profile section is that you have the privilege to delete the users and view the statistics of them, like how many are male/females, age variation, how many registered between some dates and that is it.

I'm not sure how to draw the architectural models. I've downloaded some free UML tool called "UMLet" where I drew some "business requirements" in a form of a diagram for the functional requirement part. Here is what I have so far:

enter image description here

However, after having read about this stuff in the internet, I feel confused, and am not sure that this diagram is a good start. Could someone could drive me in the right way?

What should I add to this diagram? If you need more info to provide on this just let me know..


If you want to show the architecture of your site, you need to think about what architectural aspect you want to focus. It might well be that you need several diagrams, just as a building architect would make several diagrams to show you the house you want from the front, the side and per floor.

So basically:

  • the use-case diagram document the main interactions with the sites such as login, register, logout, browse news, create and edit news, or manage users. Use several actors: one for each role (e.g. normal user, admin, etc...) and secondary actors for remote systems to which your website is connected. Don't show the navigation between pages here !
  • a simplified class diagram, could show the different kind of pages, views, information sources, menus, and forms that you have. Again, it's just an inventory of the different kinds, and how they structurally relate to each other.
  • if you want to show the navigation flow in your site, you could consider using an activity diagram. On the other side, if your website is relatively simple, you could as well consider an informal diagram, that show sthe succession of screen sketeches interlinked as in a flowchart, instead of the more stricter UML diagrams.
  • finally, if you want to show the layout of your pages, don't use UML. Do this with simple informal screen sketches.
  • Last but not the least, if you have to show the physical architecture of the system (the hardware servers, operating systems, apache, etc...) you'd need an UML deployment diagram. But these are not the greatest tool to communicate about simple architectures, so do it only if formally needed. If not, use just an informal sketch with some annotations.

Additional reading:

  • @ChristopheThanks for the heads-up, really liked it! But to what have you referred to more exactly when you said "secondary actors for remote systems to which your website is connected". To Apache Server and MySql database or API's that are used throughout the app? – udarH3 May 20 '17 at 10:45
  • The use case represents what the "system under consideration" can do. Basically apache, mysql, etc.. are components of your system. So you shall not show them on this diagram (it's something that you can consider on the deployment diagram). What I meant with secondary actors are other systems that are not under your control such as third party webservices for weather forecasts, stock quotations, etc... and which are actively involved in one of your use case – Christophe May 20 '17 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.