How to use the drawing tool titled "Draw a pedigree chart in SVG format"

The drawing tool is easy to use; so it may be unnecessary to read this manual before using the tool. If you feel that the tool is somewhat awkward to use, please read the outline. When you need more detailed information, please read other sections as necessary.

(0) Outline

The tool's page includes: a region for displaying the pedigree chart (family tree chart); a region for indicating the information about the person at the mouse pointer; menu buttons; and submenus. When you click a menu button for the type of the operation you want to do, the input forms of the submenus belonging to that type will be displayed. Enter necessary data to the input form and thereby build a pedigree chart step by step.

Do not hesitate to contact me on Twitter.

To add an individual person, use [Add a person] submenu. Other submenus are not always necessary.

[Wide mode] is recommended when you intend to write the name of (and/or an annotation for) a person in Han characters, Kana characters, etc. On the other hand, [narrow mode] is recommended when you intend to write the name of (and/or an annotation for) a person in Latin characters etc. The mode selected by this submenu affects the width occupied by character strings of the names and annotations of persons written in horizontal direction.

I'm sorry that this tool might fail to support other writing systems, especially, right-to-left writing systems such as Arabic script.

Select a person you want to rename, from the pull-down list. Then, enter the new name.

If the new name is longer than the current name, the rectangle of the renamed person will be expanded automatically. Conversely, if the new name is shorter than the current name, you can choose whether to shrink the rectangle so that it will fit the new name or to let the rectangle's size remain as it is.

To draw a person having many horizontal links (e.g., an emperor having many concubines) and the linked many persons, and arrange them neatly and comprehensibly, the rectangle of the former person should have a sufficient height. Use this submenu in such a case in order to increase, as needed, the height of the rectangle of the person who have (or is intended to have) many horizontal links.

You can annotate a person as you like. The annotation can be any text, such as the posthumous name, temple name, courtesy name, pseudonym, alias, year of birth, year of death, etc. The color of the annotation is selectable from the predefined choices. You can change the color later by manually editing the CSS file and/or SVG file.

There is no feature for modifying or removing annotations. Please manually edit SVG file to modify or remove an annotation.

Use this submenu in order to indicate figures indicating a numerical order such as the order of siblings, order of emperors of a dynasty, order of succession to the throne at a certain point in time, etc.

This submenu can be used for other purposes than indication of the numerical order. For example, this submenu can be used to (temporarily or permanently) mark a certain person. The mark might be, for example, a black badge of No. 0 that is put on the lower right corner of him/her.

For example, a badge as a mark may mean that (1) you suspended the drawing operations, (2) you leaved the marked person unsettled, and (3) you intend to study his/her descendants and to add them to the pedigree chart later.

As another example, two or more badges of the same number (and the same color) may be used as marks to mean that two or more rectangles indicate the same single person. Such usage will be helpful when the pedigree chart is highly complicated, where arranging multiple rectangles for the single person separately may be helpful in simplifying the chart and making the chart easier to understand at a glance.

There is no feature for modifying or removing a badge. Please manually edit SVG file to modify or remove a badge.

When a person is selected from the pull-down list, the selected person will be displayed at the center of the region for the pedigree chart. This submenu is provided for a case where so many persons (e.g., hundreds or more) are included in the pedigree chart that you cannot remember the location of each person in the chart and you have to look around the whole chart for a person you want to see.

There may be room for improvement. Sometimes, finding a target person from the pull-down list seems to be difficult, too.

Select a person to remove, and then remove him/her.

Use [Horizontal links] menu in order to connect two persons by a horizontal line (horizontal link) to indicate marriage or the like. In many cases, [Add a horizontal link] submenu will suffice.

Select two persons that you want to connect by a horizontal link, from the two pull-down lists; and select the type of the horizontal link (i.e., a single-line link or a double-line link). Then, click [add a new link as specified] button. If necessary, one of the two selected persons will be automatically moved downwards so that the link connecting them will be (not slanted but) horizontal.

By default, on each vertical edge of the rectangle that indicates each person, the 1/8, 2/8, 3/8, 4/8, 5/8, 6/8, and 7/8 points (from the top to the bottom) can be an end point of a horizontal link. With no details specified, the 4/8 point (i.e., the middle point of the vertical edge) will be automatically selected as an end point of a horizontal link. If the 4/8 point is already occupied, the 2/8 point will be selected. If the 2/8 point is also already occupied, then the 6/8 point will be selected. As such, the position of the end point will be selected in accordance with the descending priority of 4/8, 2/8, 6/8, 1/8, 7/8, 3/8, and 5/8. The above-mentioned selection will be done automatically.

By manually editing the SVG file of the pedigree chart, you can modify a solid line of a horizontal link (either single-line link or double-line link) to a dashed line.

Use this submenu when you want to specify the end points of a horizontal link. This submenu is convenient for a case where there is a person to be connected with many persons (such as an emperor having many concubines).

Select (1) the person on the left-hand side of a horizontal link, (2) the position on the right vertical edge of his/her rectangle, i.e., the position that should be the end point of the horizontal link, (3) the person on the right-hand side of the horizontal link, (4) the position on the left vertical edge of his/her rectangle, i.e., the position that should be the end point of the horizontal link, and (5) the type of the horizontal link. Then, click [add the new link as specified above] button. If necessary, one of the two selected persons will be automatically moved downwards so that the link connecting them will be (not slanted but) horizontal.

By default, each person is set to be connectable with other seven persons on his/her right-hand side and with yet other seven persons on his/her left-hand side. Even this default setting, however, might be insufficient for a certain person who should be connected with many persons (e.g., an emperor having many concubines). In such a case, use this submenu.

Select the target person, select the left or right vertical edge of the rectangle of him/her, and click [increase the allowable number of partners] button. Then, the number of horizontal links that are allowed to be connected to the selected edge of the rectangle of the target person will be increased.

The number of horizontal links that are allowed to be connected to a vertical edge is 2n − 1 (n ≥ 3). In other words, the number is 7, 15, 31, 63, ….

It is rare that the pedigree chart includes a person to be connected with fifteen (15) or thirty one (31) persons on his/her one side (either right-hand side or left-hand side). This submenu is helpful not only in such a rare case but also in more frequent cases to improve the appearance of the chart.

For example, assume that you want to connect five (5) persons to a target person on his/her right-hand side. In this case, which is not so extraordinary, this submenu will be helpful as explained below.

First, use this submenu to increase the number of horizontal links allowed to be connected to the target person on his/her right-hand side so that the number will be fifteen (15). Next, connect the five persons to the target person so that the five horizontal link are connected to the 2/16, 5/16, 8/16, 11/16, and 14/16 points (from the top to the bottom) on the right vertical edge of the rectangle of the target person. These steps make the intervals between the five horizontal links wider than the intervals of the case where this submenu were not be used and the links were connected to the positions at 2/8, 3/8, 4/8, 5/8, 6/8 on the right vertical edge (i.e., 3/16 of the length of the edge is longer than 1/8 of that). Dispersing the horizontal links from the top to the bottom of a vertical edge in a balanced manner (and thereby making the intervals between them wider) can help to improve the appearance and visibility of the chart.

Select a horizontal link to remove, and then remove it.

Use [Vertical links] menu in order to connect persons by a vertical line (vertical link) to indicate parent-and-child relation or the like. In many cases, [Add a vertical link] submenu will suffice.

You can add a vertical link from a parent to a child (either a solid line or a dashed line). You can also add a vertical link from parents who are connected by a horizontal link, to a child (either a solid line or a dashed line).

You can choose either a solid line or a dashed line as you like. For example, a solid line may be used for the relation between a parent and his/her biological child, whereas a dashed line may be used for the relation between a parent and his/her adopted child. As another example, a dashed line may be used for connecting an ancestor and his/her descendant, with some persons in between on the lineage omitted.

When a new vertical link is connected to the upper or lower horizontal edge of the rectangle of a person, the position to which the vertical link should be connected is decided as below. If no vertical link is connected on the edge, then the new vertical link will be connected to the middle point of the edge. If the line type (which is either a solid line or a dashed line) of the new vertical link is the same as that of a link already connected to the middle point of the edge, then the new vertical link will be connected to the middle point of the edge. In other cases, the new vertical link will be connected to the 1/4 position from the left or right on the edge.

By default, a vertical link to a child from parents who are connected by a horizontal link runs down from the middle point of the horizontal link. This submenu is provided for adjusting the position on the horizontal link from which the vertical link runs down. This submenu will be convenient, for example, when the pedigree chart is very large and complicated.

Select a vertical link to remove, and then remove it.

Submenus for several ways of moving persons are provided.

Please note that the undo feature is not provided. When you try moving one or more persons and the result is undesirable, (1) save your data of the previous step by [Download the SVG file of any preferable step] menu, (2) read the saved SVG file from [Read an SVG file created and saved before] menu, and (3) restart your work. Steps (1) and (2) will undo the undesired operation.

Sometimes, the motion of the one or more persons can be cancelled out by simply carrying out the opposite motion, but such cancellation does not always work well. In general, when multiple persons are moved at once, there may be no motion that can cancel out the previously performed motion. Thus, the above steps (1), (2) and (3) will be needed.

Select a person to be moved and the moving direction. Specify how much the selected person should be moved.

Note: When the names of persons are written vertically, the alignment of the rectangles in the horizontal direction will be kept tidy if you move persons horizontally in units of 84 pixels.

Select a target person to be moved, a reference person whose position should be used as the reference point, and the type of alignment.

You can move a selected person horizontally so that the vertical link from his/her parent(s) will be straight. You can also move a selected person horizontally so that he/she will be positioned at the center, in the horizontal direction, of the position(s) of his/her child(ren) connected to the lower horizontal edge of his/her rectangle.

A selected person and his/her descendants will be moved down together. In addition, any person connected by a horizontal link with any of thus moved persons (and the descendants of such a connected person) will also be moved down cascadingly. You can specify how much they should be moved down.

A selected person and all the persons reachable from him/her by following any links downwards or rightwards will be moved together to the right. You can specify how much they should be moved.

A selected person and all the persons reachable from him/her by following any links downwards or leftwards will be moved together to the left. You can specify how much they should be moved.

Submenus relating to the whole chart (not relating to an individual part of the chart) are provided.

When you want to adjust a margin (the top, bottom, left, or right margin) of the pedigree chart, use this submenu and shift the whole chart upwards, downwards, to the left, or to the right. When the chart has been shifted unexpectedly, shift the chart again in the opposite direction to cancel the unexpected shifting.

Use this submenu when you want to increase the height of the whole pedigree chart or you want to reduce the bottom margin (by decreasing the height of the whole pedigree chart). If you want to reduce the top margin, shift the whole chart upwards by [Shift the whole chart] submenu.

Use this submenu when you want to increase the width of the whole pedigree chart or you want to reduce the right margin (by decreasing the width of the whole pedigree chart). If you want to reduce the left margin, shift the whole chart leftwards by [Shift the whole chart] submenu.

Use this submenu when you want to set the same value to the top, bottom, left, and right margins of the chart. This submenu will be useful when used to finish the chart.

It would be useful to embed a title into the SVG file of the created pedigree chart. When the chart is opened by a Web browser, the title will be displayed as tooltip text. The title may also be read out by a screen reader.

This submenu is provided to enter the title. The initial value of the title is the empty string.

This submenu is provided to enter a description of the pedigree chart. The description will be embedded into the SVG file of the created pedigree chart. The embedded description may be read out by a screen reader (while the description is invisible). The initial value of the description is the empty string. Depending on your purpose of the pedigree chart, please consider embedding a description to improve the accessibility.

In many cases, [Download the SVG file of the current state] submenu will suffice. Because no undo feature is implemented, [Download the SVG file of any preferable step] submenu is provided instead. [Download a pedigree chart viewer] submenu allows you to download a set of files constituting a simple viewer for the created pedigree chart. A few other output features are also provided.

This submenu seems to be unnecessary in most cases because this is provided chiefly for debugging.

You can download the data of the current pedigree chart as an SVG file. You can specify the prefix of the file name as you like.

You can also specify whether to let the custom data attributes remain or to delete them. Let the custom data attributes remain if you intend to open the downloaded file later by this tool to further edit the pedigree chart. Delete the custom data attributes only when you finish editing the pedigree chart and you don't intend to open the chart by this tool any more. In such a case, if you want to reduce the size of the SVG file before using the file in another app, deletion of the custom data attributes will be useful.

Web browsers can be used to browse the downloaded SVG file. So as to browse it in the same style (e.g., in the same color, of the same line width, etc.) as the one applied during editing, put the downloaded SVG file and the CSS file for it on the same folder on your computer.

As mentioned above, no undo feature is provided. Instead, you can download the data of each step as an SVG file.

The character string entered in the input field for the prefix of the file name in [Download the SVG file of the current state] submenu will be used as the prefix of the name of the SVG file downloaded from this submenu.

Web browsers can be used to browse the downloaded SVG file. So as to browse it in the same style (e.g., in the same color, of the same line width, etc.) as the one applied during editing, put the downloaded SVG file and the CSS file for it on the same folder on your computer.

You can download, as a text file, the list of the names of the persons included in the pedigree chart. You can choose whether to additionally output, to the text file, the annotations (i.e., notes) that have been added by using [Annotate a person] submenu.

The first three files of the following list will be automatically downloaded. Put the following six files on the same directory on your computer and open the HTML file by a Web browser. It will work as a simple viewer for the pedigree chart.

For simply browsing the pedigree chart, the viewer will be useful enough as it is. There is, however, room for improvement in convenience of the viewer. The viewer will be made more convenient by editing the HTML file for the body of the viewer to add information about the persons, horizontal links, and vertical links in the pedigree chart.

The viewer is designed so that when invoked with a query string such as ?pid=p123, the viewer will display the detailed information about the specified person (in this example, the person whose ID is p123) and display him/her at the center. If no query string is specified, the person having the lowest ID, which is p0 in most cases, will be regarded as the specified person. When linking from any other HTML file to the viewer, it will be useful to specify the linked location (i.e., the value of the href attribute) as pedigree_viewer_yyyy-mm-dd_hhmmss.sss.html?pid=p123, for example.

By clicking the “Chart” button or the “List” button at the upper right corner of the viewer, you can switch between the chart mode and list mode. In the chart mode, the pedigree chart is displayed. In the list mode, the pedigree chart is hidden, and the list you have edited (i.e., the list, each item of which includes information about a person, a horizontal link, or a vertical link in the chart) is displayed. By default, the viewer is opened in the chart mode. If the viewer is opened with the query string ?page_style=list, the list mode is applied.

This menu is for reading data that has been created.

By using this submenu, an SVG file that has been saved by [Download the SVG file of the current state] submenu, [Download the SVG file of any preferable step] submenu, or [Download a pedigree chart viewer] submenu can be read into the tool. After the SVG file has been read, you can edit the pedigree chart as you like. When you finish editing, save an SVG file again as you need.

The data of the pedigree chart may accidentally disappear while you are editing the pedigree chart. For example, while you are editing the pedigree chart, you might accidentally go to another page (for example by tapping the browser's [Back] button), reload this tool's page, or close the tab of this tool's page. In some cases, the data may remain fortunately; but in other cases, the data may disappear. It may perhaps depends on your browser's settings.

This submenu may serve as measures against such disappearance of data. However, it is not recommended to rely on this submenu too much because your browser's settings may decide whether the data will be successfully restored in response to a click on [read it and display the chart as read] button.

(8) Editing saved data manually

You can change the appearance of the pedigree chart as you like, simply by editing one or more files using a text editor. You can also make the pedigree chart viewer more convenient by adding descriptions.

(8-1) Editing the SVG file of the pedigree chart

If you want to modify the style applied to the pedigree chart, or if you want to remove a badge or an annotation that you have added mistakenly, edit the SVG file manually. SVG files are, in fact, plain text files; so you can edit them easily by using a text editor.

You can modify the style by editing the style element, which is written as shown below and can be found near the beginning of the SVG file of the pedigree chart.

<style> @import url(pedigree_svg.css); </style>

For example, a new style for emperors may be defined as below. In this case, specify the value emperor (instead of the value neutral, feminine, or masculine) for the class attribute of the rect elements that correspond to the persons to whom you want to apply this new style.

<style> @import url(pedigree_svg.css); rect.emperor { stroke: hsl(255, 100%, 50%); fill: hsla(255, 100%, 70%, 0.5); } </style>

In another case, your new style definition such as the above one may be added to pedigree_svg.css instead of the style element within the SVG file. In such a case, editing the SVG file will solely mean editing the class attribute of the rect elements.

In yet another case, your new style may be defined in a new CSS file. Let the name of the new CSS file be user_defined.css, for example. In this case, edit the style element of the SVG file as shown below (and of course, also edit the class attribute of the rect elements as appropriate).

<style> @import url(pedigree_svg.css); @import url(user_defined.css); </style>

If you have added an incorrect annotation mistakenly, delete the text element corresponding to it. An illustrative text element of an annotation is shown below. A text element of an annotation has the id attribute whose value has the form of “p + number + n + number” (e.g., p22n0 as below).

<text writing-mode="tb" id="p22n0" x="10332" y="1512" textLength="48" lengthAdjust="spacing" dx="8" dy="0" class="note blue">梁武帝</text>

If you have added an incorrect badge mistakenly, delete the circle element and the text element that correspond to the badge. An illustrative pair of a circle element and a text element corresponding to a badge is shown below. The circle element for a badge has the id attribute whose value has the form of “p + number + b_ + position” (e.g., p2b_upper_right as below), and the text element for the badge has the id attribute whose value has the form of “p + number + bn_ + position” (e.g., p2bn_upper_right as below).

<circle id="p2b_upper_right" cx="1722" cy="282" r="17" fill="darkblue"></circle> <text id="p2bn_upper_right" x="1710" y="290" textLength="8" dx="8" dy="0" class="num_badge">1</text>

You can modify the color of a badge by changing the value of the fill attribute of the circle element. See the <color> CSS data type for details of how to specify the color.

The tool provides no choice of a dashed line for drawing a horizontal link, but you can modify any horizontal link to be drawn by a dashed line. Specifically, in the class attribute of the path element for drawing a horizontal link, add the value dashed so that the result will be class="double dashed" or class="single dashed".

(8-2) Editing the HTML file of the viewer

The viewer for the pedigree chart includes an HTML file. By editing the HTML file, you can make the viewer more convenient so that the chart and some descriptions about persons in the chart can be seen at once. The recommended way of editing the HTML file is explained below.

Modify the paragraph shown below (i.e., modify the contents of this p element). It may be useful to write a general explanation about the pedigree chart in this paragraph.

<div id="info_all"> <p>Edit this paragraph as you like.</p>

Below this p element, a dl element exists, which includes pairs of dt element and dd element. Each pair corresponds to a person, a horizontal link (indicating marriage etc.), or a vertical link (indicating parent-and-child relation etc.). It will be helpful to write a description about the person or the link in the dd element. Any note and/or any link may be embedded in the dd element as shown below (see the italicized portion).

<dt id="p162_t">Sima Yi</dt> <dd id="p162_d"> <button type="button" onclick="look_at('p162')">Look at Sima Yi</button> <button type="button" onclick="reselect('p162')">Select Sima Yi</button> Sima Yi (司馬懿). 179 - 251. His courtesy name is Zhongda (仲達). [<a href="https://en.wikipedia.org/wiki/Sima_Yi">Wikipedia</a> | <a href="https://zh.wikisource.org/wiki/%E6%99%89%E6%9B%B8/%E5%8D%B7001">Book of Jin</a>] </dd>

(8-3) Editing the CSS file for the SVG file

The CSS file (named pedigree_svg.css) for the SVG file can be edited. For example, edit the fill properties (for the background color of rectangles, and the text color), and the stroke properties (for the color of the outlines of rectangles, and the color of horizontal and vertical links), as you like. See the <color> CSS data type for details of how to specify the color.

As an example, an alternative CSS file (monochrome_svg.css) is provided. This CSS is designed so that the main body of a pedigree chart (i.e., all the parts except for annotations and badges) will be displayed in black and white. Download monochrome_svg.css, rename it pedigree_svg.css, put it and the SVG file of a pedigree chart in the same folder on your computer. Then, the pedigree chart will be displayed in black and white. If you want to eliminate the outlines of the rectangles, modify the value of the stroke property to none as shown below.

rect.neutral, rect.feminine, rect.masculine { stroke: none; fill: white; }

You can also modify the font-family property as you like.

A dashed line can be changed to a dot-and-dash line or a dotted line. Such change can be done by editing the value of the stroke-dasharray attribute set for a dashed line. See the stroke-dasharray attribute for details.

A new class can be defined, of course. For example, a class for emperors defined as to rect elements may be useful, and a class for a particular lineage defined as to path elements may also be useful.

(8-4) Editing the CSS file for the HTML file

The viewer for the pedigree chart includes the CSS file (named pedigree_viewer.css) for the HTML file. You can change the appearance of the viewer by editing this CSS file. Edit some properties such as color, background, border-color, font-family, etc. as you like. See the <color> CSS data type for details of how to specify the color.